為什麼 Margin-Top 不能在內聯元素上工作，但可以在內聯塊元素上工作？

內聯與內聯塊：為什麼Margin-Top 只能與內聯塊一起使用

問題

使用HTML 和CSS 時，使用者嘗試為

建立上邊距元素，但只有當CSS 屬性display 設定為inline-block 時才會出現，而設定為inline 時不會出現。

說明

CSS 規格定義了inline 與inline-block 的差異如下：

• inline-block：建立內嵌級區塊容器其中元素的內部內容被格式化為區塊框，元素本身被格式化為內聯級框。
• inline：產生一個或多個內聯框。

至關重要的是，CSS2 規範規定內聯元素僅考慮水平邊距（例如， margin-left)。

區別

區別在於如何處理內聯和內聯塊元素：

• 內聯時元素被視為真正的內聯時元素被視為真正的內聯元素，內聯塊元素被視為塊，但在視覺上與一個元素內聯另一個。
• 區塊級元素（如內聯塊）同時考慮水平和垂直邊距，而內聯元素僅考慮水平邊距。

解析度

因此，在提供的情況下，將顯示設為

上的內聯元素僅應用水平邊距，不包括頂部邊距。但是，將顯示設為 inline-block 允許套用水平和垂直邊距，包括頂部邊距。

以上是為什麼 Margin-Top 不能在內聯元素上工作，但可以在內聯塊元素上工作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！