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。