保證金頂部不適用於跨度元素？

124

有人能告訴我我編碼錯了嗎？一切都在發揮作用，唯一的問題是頂部沒有餘裕。保證金頂部不適用於跨度元素？

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">[email protected]</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; 
}

來源

2012-07-28 user1548544

202

不同於div，p 其是Block Level元件，其可以在所有側上佔用margin，span 不能因爲它是一個Inline元件，其水平地只佔用空間。

從specification：

邊距屬性指定框的邊緣區域的寬度。 '保證金'速記屬性設置了所有四面的保證金，而其他保證金屬性僅設置它們各自的一面。這些屬性適用於所有元素，但垂直邊距不會對未替換的內聯元素產生任何影響。

Demo 1（垂直margin不施加span是inline元件）

解？讓你的span元素，display: inline-block;或display: block;。

Demo 2

會建議你使用display: inline-block;因爲這將是inline以及block。使其block只會導致你的元素來渲染on another line，如block級元素利用水平空間100%網頁上，除非它們是由inline-block或他們floated到left或right。

^{1. Block Level Elements - MDN源}

^{2。Inline Elements - MDN資源}

來源

2012-07-28 12:25:01

span是不支持垂直邊距內聯元素。改爲將外邊距放在div外側。

來源

2012-07-28 12:24:11

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

來源

2014-10-17 05:23:34

看起來像你錯過了一些選項，嘗試加：

position: relative; 
top: 25px;

來源

2015-08-11 18:53:17

它的工作，謝謝。 – whitesiroi 2016-03-28 03:46:50

非常好，非常感謝。 – 2016-05-20 14:31:10

雖然這不能解決問題，但是是一個很好的解決方案！ – Bruce 2017-05-25 03:54:03

保證金頂部不適用於跨度元素？

回答

相關問題