首頁 > web前端 > css教學 > 內聯元素真的缺少「margin-top」和「margin-bottom」屬性嗎?

內聯元素真的缺少「margin-top」和「margin-bottom」屬性嗎?

Susan Sarandon
發布: 2024-12-23 16:16:11
原創
688 人瀏覽過

Do Inline Elements Really Lack `margin-top` and `margin-bottom` Properties?

行內元素的填充

關於行內元素屬性,常見的問題是關於填充和邊距。根據一些消息來源,內聯元素具有完整的 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板