Boostrap 中錨標簽內的圖像

Question

在 Bootstrap 中，我經歷了關於錨標簽中 img 的一件事。

1) 如果您檢查錨標簽，它的高度將大於 img。 我找到了答案，因為 img 具有顯示塊 css。

2) 那我也不知道為什么它比 img 需要最大高度？ 然后，如果我將顯示塊同時放在標簽和 img 標簽上，那么問題就解決了（兩個高度相等）。

現在回到第 1 點）假設如果我從 img 中刪除顯示塊，那么錨標記的高度將等於 16px，這是為什么？

然后，如果您刪除瀏覽器樣式，如引導字體大小和默認字體大小和行高，則錨標記高度將移動到 19px 高度。 為什么？

Answer 1

在沒有任何樣式的情況下， <a>是一個內聯元素，並且其中沒有任何內容使它變得大於其標准高度（有效字體的計算行高），即使您放置了<img>在那里更大。
因此，當 font-size 為 16px 且 line-height 為 1.2 時，您有一個 19 像素高的<a> 。

但是，如果將<img>的顯示類型更改為block ， <a>不再是簡單的內聯元素。 對於塊內容，它實際上成為一個塊本身，然后它具有其內容的高度。 （這就是塊元素所做的。）

關於 Bootstrap 有效的大小； 是的，Bootstrap css 將字體大小設置為 14px，因此高度將為 16px。