為什麼錨標記不從其父容器繼承維度？

錨標記：為什麼它們不從容器繼承維度

渲染網頁時，錨標記的大小可能會令人困惑。儘管包含在具有明確高度和寬度的元素中，錨標記通常無法繼承這些尺寸。為了闡明這種行為，讓我們深入研究 CSS 規範並探索背後的機制。

CSS 規範

根據 CSS 2.1 規範，盒子內容區域的尺寸（寬度和高度） ）受到各種因素的影響，包括生成元素是否設定了“寬度”或“高度”屬性、框中是否存在文字或其他框以及特定於表格的元素

錨標記顯示屬性

預設情況下， （錨）標籤擁有內嵌顯示值。內嵌元素及其內容直接參與頁面的版面。這種非替換元素的性質會影響其尺寸的確定方式。

高度計算

對於錨標記等內聯非替換元素，「height」屬性不適用。相反，內容區域的高度是基於字體，如 CSS 規範中所述。在給定的範例中，錨標記高度為 18px，源自於圖像中的單行文字。圖像內容和容器的高度都不起作用。

寬度計算

「width」屬性也不適用於內聯、非替換元素。寬度由錨標記的內容、填充、邊框和邊距決定。對於第一個錨標記，寬度計算如下：

Width = content (114px) + left margin (20px) + left and right borders (10px) = 144px

對於第二個錨標記：

Width = content (280px) + left margin (20px) + left and right borders (10px) = 310px

空間處理

此外，空間處理影響寬度計算。在內聯上下文中，前導（最左邊）和尾隨（最右邊）空格被丟棄，而間隙空格被折疊成單一空格。這可能會為錨標記的寬度添加空間，從而影響寬度計算。

以上是為什麼錨標記不從其父容器繼承維度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！