মার্জিন-টপ স্প্যান উপাদানগুলির জন্য কাজ করছে না?

Question

কেউ আমাকে বলতে পারে যে আমি কী ভুল কোডিং করেছি? সবকিছুই কাজ করছে, একটাই জিনিস যে শীর্ষে কোনও মার্জিন নেই।

এইচটিএমএল :

<div id="contact_us"> <!-- BEGIN CONTACT US -->
  <span class="first_title">Contact</span>
  <span class="second_title">Us</span>
  <p class="content">For any questions whatsoever please contact us through the following e-mail address:</p></br></br>
  <p class="e-mail">[e-mail]</p></br></br></br></br>
  <p class="read_more"><a href="underconstruction.html">Read More</a></p>
</div> <!-- END CONTACT US -->

সিএসএস :

span.first_title {
  margin-top: 20px;
  margin-left: 12px;
  font-weight: bold;
  font-size: 24px;
  color: #221461;
}

span.second_title {
  margin-top: 20px;
  font-weight: bold;
  font-size: 24px;
  color: #b8b2d4;
}   

Answer 1

¹ টির মতো div, যা ব্লক স্তর উপাদানগুলি যা সমস্ত পক্ষই গ্রহণ করতে পারে , ² এটি কোনও ইনলাইন উপাদান হিসাবে পারে না যা কেবলমাত্র অনুভূমিকভাবে মার্জিন গ্রহণ করে।p marginspan

স্পেসিফিকেশন থেকে :

মার্জিন বৈশিষ্ট্যগুলি একটি বাক্সের প্রান্তিক ক্ষেত্রের প্রস্থ নির্দিষ্ট করে। 'মার্জিন' শর্টহ্যান্ড সম্পত্তি চারটি পক্ষের জন্য মার্জিন সেট করে যখন অন্য মার্জিন বৈশিষ্ট্যগুলি কেবল তাদের নিজ নিজ পক্ষ সেট করে। এই বৈশিষ্ট্যগুলি সমস্ত উপাদানগুলিতে প্রযোজ্য, তবে উল্লম্ব মার্জিনগুলি অ-প্রতিস্থাপিত ইনলাইন উপাদানগুলিতে কোনও প্রভাব ফেলবে না।

ডেমো 1 (উলম্বটি কোনও উপাদান marginহিসাবে প্রয়োগ হয় না )spaninline

সমাধান? আপনার spanউপাদান তৈরি করুন , display: inline-block;বা display: block;।

ডেমো 2

আপনি ব্যবহার করতে সুপারিশ করবে display: inline-block;যেমন হতে হবে inlineএবং সেইসাথে block। এটি তৈরি blockশুধুমাত্র রেন্ডার করতে আপনার উপাদান পরিণাম ডেকে আনবে অন্য লাইনে , যেমন blockস্তর উপাদান নিতে 100%, পৃষ্ঠাতে অনুভূমিক স্থান যতক্ষণ না তারা তৈরি করা হয় inline-blockবা তারা floatedকরতে leftবা right।

---

^{1. ব্লক স্তর স্তরসমূহ - MDN উত্স}

^{2. ইনলাইন উপাদানসমূহ - MDN রিসোর্স}

Answer 2

দেখে মনে হচ্ছে আপনি কিছু বিকল্প মিস করেছেন, যুক্ত করার চেষ্টা করুন:

position: relative;
top: 25px;

Comments

যদিও এটি প্রশ্নের উত্তর দেয় না, তবে এটি সমস্যার একটি ভাল সমাধান!

— ব্রুস

নিখুঁত সমাধান

— আকিতা_এমজে

Answer 3

spanএকটি ইনলাইন উপাদান যা উল্লম্ব মার্জিনকে সমর্থন করে না। divপরিবর্তে বাইরের দিকে মার্জিন রাখুন ।

Answer 4

spanউপাদানটি display:inline;ডিফল্টরূপে আপনাকে এটি তৈরি করতে হবে inline-blockবাblock

আপনার সিএসএসকে এটির মতো পরিবর্তন করুন

span.first_title {
    margin-top: 20px;
    margin-left: 12px;
    font-weight: bold;
    font-size:24px;
    color: #221461;
    /*The change*/
    display:inline-block; /*or display:block;*/
}

Answer 5

সর্বদা একটি জিনিস মনে রাখুন আমরা ইনলাইন উপাদানগুলিতে উল্লম্বভাবে মার্জিন প্রয়োগ করতে পারি না, আপনি যদি প্রয়োগ করতে চান তবে এর প্রদর্শন প্রকারটি ব্লক বা ইনলাইন ব্লকে পরিবর্তন করুন for উদাহরণস্বরূপ স্প্যান {প্রদর্শন: ইনলাইন-ব্লক;}