简体繁体 English

Boostrap 中锚标签内的图像

[英]Image inside anchor tag in Boostrap

原文 2015-11-08 06:36:43 2 1 html/ css/ twitter-bootstrap

In Bootstrap, i experienced one thing about img inside anchor tag.在 Bootstrap 中，我经历了关于锚标签中 img 的一件事。

1) If you inspect the anchor tag it will have height greater than img. 1) 如果您检查锚标签，它的高度将大于 img。 I found the answer because img has display block css.我找到了答案，因为 img 具有显示块 css。

2) Then also I dont know why it took max height than img? 2) 那我也不知道为什么它比 img 需要最大高度？ then if i put display block to both a tag and img tag then problem solved(both height equals).然后，如果我将显示块同时放在标签和 img 标签上，那么问题就解决了（两个高度相等）。

Now coming back to point 1) suppose if I remove display block from img then anchor tag will have height equals to 16px why is that?现在回到第 1 点）假设如果我从 img 中删除显示块，那么锚标记的高度将等于 16px，这是为什么？

then if u remove browser styles like bootstrap font-size and default font-size and line height then the anchor tag height moves to 19px height.然后，如果您删除浏览器样式，如引导字体大小和默认字体大小和行高，则锚标记高度将移动到 19px 高度。 Why?为什么？

1 个解决方案

In the absence of any styles, the <a> is an inline element, and there's nothing in it that makes it grow larger than its standard height (the computed line-height of the font in effect), even if you put an <img> in there that's larger.在没有任何样式的情况下， <a>是一个内联元素，并且其中没有任何内容使它变得大于其标准高度（有效字体的计算行高），即使您放置了<img>在那里更大。
So, when the font-size is 16px and the line-height is 1.2, you have a 19 pixel high <a> .因此，当 font-size 为 16px 且 line-height 为 1.2 时，您有一个 19 像素高的<a> 。

However, if you change the display type of the the <img> to block , the <a> is no longer a simple inline element.但是，如果将<img>的显示类型更改为block ， <a>不再是简单的内联元素。 With block content, it effectively becomes a block itself, and then it takes on the height of its content.对于块内容，它实际上成为一个块本身，然后它具有其内容的高度。 (That's what block elements do.) （这就是块元素所做的。）

As to the sizes with Bootstrap in effect;关于 Bootstrap 有效的大小； yes, the Bootstrap css sets the font size to 14px, so the height will be 16px.是的，Bootstrap css 将字体大小设置为 14px，因此高度将为 16px。