Boostrap中锚标签内的图像

时间:2015-11-08 06:36:43

标签: html css twitter-bootstrap

在Bootstrap中,我在锚标记中遇到了一个关于img的事情。

1)如果你检查锚标签,它的高度将大于img。我找到了答案,因为img有显示块css。

2)然后我也不知道为什么它需要最大高度而不是img?那么如果我把显示块放到标签和img标签上,那么问题就解决了(两个高度等于)。

现在回到第1点)假设我从img中移除了显示块,那么锚标签的高度等于16px为什么会这样?

然后,如果您删除浏览器样式(如bootstrap font-size和默认字体大小和行高),则锚标签高度将移至19px高度。 为什么?

1 个答案:

答案 0 :(得分:0)

在没有任何样式的情况下,<img>是一个内联元素,并且它没有任何东西使它变得比它的标准高度(有效字体的计算行高)大,即使你把<a>放在那里更大的 因此,当font-size为16px且行高为1.2时,您有一个19像素的高<img>

但是,如果您将block的显示类型更改为<a>,则{{1}}不再是简单的内联元素。使用块内容,它有效地成为一个块本身,然后它占用其内容的高度。 (这就是块元素的作用。)

关于Bootstrap的大小有效;是的,Bootstrap css将字体大小设置为14px,因此高度为16px。