Margin-Top ใช้งานไม่ได้กับองค์ประกอบการขยาย?

มีคนบอกฉันว่าฉันเขียนผิดไหม ทุกอย่างทำงานได้สิ่งเดียวคือไม่มีขอบที่ด้านบน

HTML :

<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">info@e-mail.com</p></br></br></br></br>
  <p class="read_more"><a href="underconstruction.html">Read More</a></p>
</div> <!-- END CONTACT US -->

CSS :

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;
}   

ซึ่งแตกต่างจากdiv, p ¹ซึ่งเป็นบล็อกระดับองค์ประกอบซึ่งสามารถใช้เวลาmarginในทุกด้านspan^{ที่ 2}ไม่สามารถเป็นมันเป็นInlineองค์ประกอบซึ่งจะขึ้นอัตรากำไรขั้นต้นในแนวนอนเท่านั้น

จากข้อกำหนด :

คุณสมบัติระยะขอบระบุความกว้างของพื้นที่ระยะขอบของกล่อง คุณสมบัติย่อของ 'มาร์จิ้น' ตั้งค่าระยะขอบสำหรับทั้งสี่ด้านในขณะที่คุณสมบัติระยะขอบอื่น ๆ ตั้งค่าด้านที่เกี่ยวข้องเท่านั้น คุณสมบัติเหล่านี้ใช้กับองค์ประกอบทั้งหมด แต่ระยะขอบแนวตั้งจะไม่มีผลกระทบใด ๆ กับองค์ประกอบอินไลน์ที่ไม่ถูกแทนที่

การสาธิต 1 ( marginไม่ได้ใช้แนวตั้งเนื่องจากspanเป็นinlineองค์ประกอบ)

สารละลาย? ทำให้spanองค์ประกอบหรือdisplay: inline-block;display: block;

ตัวอย่าง 2

ขอแนะนำให้คุณใช้display: inline-block;เป็นก็จะเป็นเช่นเดียวกับinline blockทำให้มันเป็นblockเพียงจะส่งผลให้องค์ประกอบของคุณจะทำให้ในสายอื่นเป็นblockองค์ประกอบระดับใช้100%พื้นที่แนวนอนบนหน้าเว้นแต่พวกเขาจะทำinline-blockหรือพวกเขาจะfloatedไปหรือleftright

^{1. องค์ประกอบระดับบล็อก - แหล่งที่มาของ MDN}

^{2. องค์ประกอบแบบอินไลน์ - ทรัพยากร MDN}

ดูเหมือนว่าคุณจะพลาดตัวเลือกลองเพิ่ม:

position: relative;
top: 25px;

spanเป็นองค์ประกอบอินไลน์ที่ไม่รองรับระยะขอบแนวตั้ง วางระยะขอบไว้ด้านนอกdivแทน

spanองค์ประกอบเป็นdisplay:inline;ค่าเริ่มต้นที่คุณต้องใช้inline-blockหรือblock

เปลี่ยน CSS ของคุณให้เป็นเช่นนี้

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;*/
}

โปรดจำไว้เสมอสิ่งหนึ่งที่เราไม่สามารถใช้ระยะขอบในแนวตั้งกับองค์ประกอบแบบอินไลน์หากคุณต้องการที่จะใช้แล้วเปลี่ยนประเภทการแสดงผลเพื่อบล็อกหรือบล็อกแบบอินไลน์ตัวอย่างเช่นช่วง {display: inline-block;}