為什麼錨標籤不繼承高度和寬度？

為什麼錨標籤不繼承包含元素的高度和寬度

使用開發者工具檢查錨標籤時，使用者可能會注意到其顯示尺寸與實際尺寸之間的差異包含元素的。本文深入探討了此行為背後的原因。

錨標記顯示：預設內聯

錨標記 () 的預設顯示值為內聯。這意味著它們的內容在文字中流動，並且僅佔據容納其內容所需的寬度，包括文字和任何嵌入的圖像。

高度：由字體規格決定

CSS 規範指出height 屬性不適用於內聯、不可替換的元素，例如錨標記。相反，它們的高度是根據字體規格確定的。實際上，這相當於單行文字的高度。因此，相關錨定標籤的高度為 18px，對應於文字中使用的字體大小，不受圖像大小或封閉 div 的高度的影響。

寬度：內容總和，間距和邊距

對於非替換的內聯元素，寬度屬性也不適用。相反，寬度是根據元素的內容、填充、邊框和邊距計算的。

在提供的程式碼中，第一個錨標記的寬度為 144px，由影像寬度 (110px) 的總和得出)、左邊距 (20px) 和兩個 5px 邊框。同樣，第二個錨標籤的寬度是 310px，根據更寬的圖像寬度（280px）、左邊距（20px）和 10px 邊框計算得出。

空間的影響

它是值得注意的是，空格會影響計算的寬度。在這種情況下，由於錨標籤佈置在行框中，因此只有第一個錨標籤末尾和第二個錨標籤開頭的空格對寬度有貢獻。第一個開頭和第二個結尾處的其他空格將會被刪除。

總之，由於顯示類型和 CSS，錨標記的高度和寬度不會從其包含元素繼承內聯、非替換元素的規範。它們的尺寸是根據元素的內在屬性來決定的，例如字體規格、內容大小、間距和邊距。

以上是為什麼錨標籤不繼承高度和寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！