为什么在这段代码中的图像下面有空间？ [英] Why is there space under the image in this code?

问题描述

我有以下代码，它允许红色从a元素显示。为什么是这样。我希望a元素只会扩展到内容的大小，但它看起来像一个有点大。请参阅此处的代码 http://codepen.io/anon/pen/soqEz 。

I have the following code, and it allows the red to show through from the a element. Why is this. I would have expected that the a element would only expand to the size of the contents but it looks like it's a bit bigger than that. See the codepen here http://codepen.io/anon/pen/soqEz.

HTML

<a href="#"><img src="http://placehold.it/150x150" /></a>

CSS

a{
  background: red;
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:0;
}
img {
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:0;
}

编辑：我看到下面的答案...也解释为什么空间是在所有（我的意思是，它是一个块级元素...它的目的是在第一位）...而不是试图摆脱它。感谢

I see the answers below ... but can anyone also explain why the space is there AT ALL ( I mean given that it's a block level element ... what's the purpose of it in the first place ) ... as opposed to trying to get rid of it. Thanks

推荐答案

img 元素 inline 。 inline 元素充当文本，默认为 vertical-align：baseline 。这意味着图像的底部与文本的底部对齐。注意，小写字母p或g低于垂直文本对齐的底部。您可以通过添加 vertical-align：bottom 或 display：block 来修复它。

The img element is inline by default. inline elements act as text and default to a vertical-align: baseline. This means that the bottom of the image aligns with the bottom of your text. Notice that a lower case p or g goes below the bottom of the vertical text alignment. You can fix it by either adding vertical-align: bottom OR display: block.

这篇关于为什么在这段代码中的图像下面有空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！