為什麼錨標籤忽略容器高度但尊重寬度？

為什麼錨標記忽略其容器的高度和寬度

在HTML 中，錨標記() 通常似乎忽略設定的高度和寬度屬性對於它們的包含元素。這可以透過使用開發人員工具檢查此類元素的大小來觀察，如提供的 JsFiddle 中所示。

高度計算

CSS 2.1 規範規定錨標記內容區域的高度僅由其字體規格決定。由於錨標記預設為內聯顯示，因此它們本質上將自身包裹在其內容周圍。因此，height 屬性不適用於錨標記等內聯元素。

在提供的範例中，錨標記內的單行文字確定 18px 的高度，無論周圍元素的高度規範如何。

寬度計算

雖然錨標記不遵守其容器的高度屬性，但它們確實參與寬度的計算。但是，寬度是由元素本身的內容決定的，包括內邊距、邊框和邊距。

對於第一個錨標記，寬度計算如下：

• 內容寬度（圖像空間）：114px
• 左邊距：20px
• 左右邊框： 2x5px
• 總寬度：144px

同理，第二個錨標籤的寬度確定為：

• 內容寬度（圖像）：280px
• 左邊距： 20px
• 左右邊框：2x5px
• 總寬度：310px

此外，錨標記內容內的間距會影響寬度計算。由於內聯格式，第一個標籤開頭和第二個標籤結尾處的空格被省略，而它們之間的空格則被折疊為一個。這個空格會影響第一個標籤的寬度，但不影響第二個標籤的寬度。

以上是為什麼錨標籤忽略容器高度但尊重寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！