為什麼內嵌 HTML 元素上的 Margin-Top 會被忽略？

HTML5 中的邊距- 為什麼內聯元素會忽略Margin-Top

在HTML5 中，一些元素（如span）被歸類為內聯元素，而像div 和p 之類的其他元素是區塊級元素。這些分類會影響邊距應用於這些元素的方式。

了解內嵌元素

內聯元素設計為在文字行中自然流動。它們佔據顯示其內容所需的盡可能小的垂直空間。因此，垂直邊距不適用於它們。當你將 margin-top 應用於像 span 這樣的內聯元素時，它會被忽略。

解決方案：Inline-Block 或Block Display

給像span 這樣的內聯元素頂部有邊距，您有兩個選項：

• 顯示： inline-block:此設定使元素的行為類似於區塊元素，但仍允許其在文字行內流動。它支援水平和垂直邊距。
• 顯示：區塊：此設定將元素轉換為區塊級元素，使其能夠佔據整個可用的垂直和水平空間。但是，它將在新行上呈現該元素。

範例

考慮以下 HTML 與 CSS 程式碼：

以上是為什麼內嵌 HTML 元素上的 Margin-Top 會被忽略？的詳細內容。更多資訊請關注PHP中文網其他相關文章！