行內元素的填充
關於行內元素屬性,常見的問題是關於填充和邊距。根據一些消息來源,內聯元素具有完整的 padding 屬性,但缺少 margin-top 和 margin-bottom 屬性,只有 margin-left 和 margin-right。
在哪裡可以找到官方的邊距特定聲明
首先,此聲明不是 W3 標準中的明確聲明。然而,盒子模型確實聲明了margin-top 和margin-bottom 「對非替換的內聯元素沒有影響。」
理解邊距屬性「沒有影響」
在此上下文中的「無效果」並不表示不存在屬性。相反,這意味著這些屬性不會影響內聯元素的位置。但是,它們的存在是為了繼承目的。
範例:Margin 屬性的繼承
考慮以下程式碼:
p { border:1px solid red } i { vertical-align:top; } span { margin-top: 20px; margin-bottom: 20px; } b { display:inline-block; } .two { margin:inherit; }
<p><i>Hello</i> <span>World <b class="one">my good friend</b></span></p> <p><i>Hello</i> <span>World <b class="two">my good friend</b></span></p>
中在本例中,由於.two 規則,第二行的邊距繼承自父級範圍。這種從包含元素繼承邊距值的行為表明,margin-top 和 margin-bottom 屬性確實存在,儘管它們不會直接影響文字等內聯元素的位置。
內聯的填充屬性元素
雖然內聯元素確實具有完整的填充屬性,但padding-top 和padding-bottom 可能不會如預期般影響周圍的文字。這是因為預設情況下內聯元素本質上沒有定義的高度。因此,設定 padding-top 或 padding-bottom 可能不會在視覺上改變元素相對於其周圍文字的大小或位置。
以上是內聯元素真的缺少「margin-top」和「margin-bottom」屬性嗎?的詳細內容。更多資訊請關注PHP中文網其他相關文章!