<img>下的空格标签 [英] Space under &lt;img&gt; tag

问题描述

我有这个令人讨厌的空间在我的照片下没有理由。
我使用www.getskeleton.com作为框架。

HTML代码

 < div class =four columns bottom> 
< div class =box> 
< img src =images / picture.pngtitle =alt => 
< / div> 
< / div> 
  

CSS代码

  .box {
 border：1px solid #bfbfbf; / * ---- Border OUTSIDE * / 
} 
  

解决方案

虽然我相信这已经解决了，我相信这些答案都不正确（或至少，从接受的答案的链接已经死了）。

处理这个间距问题的方式（以及为什么它不在util库中设置，例如normalize我不确定）是图像的垂直对齐。这将解决它的HTML页面使用HTML 5 doctype时。奇怪的是，当使用例如HTML 4.01 doctype时，图片不会在行为之下展示这个错误的空间。

修复：

  img {
 vertical-align：top; 
} 
  

我希望能帮助可能遇到这个问题的人。 >

编辑：一些额外的信息我注意到，在写这之后，随后研究为什么规范不设置对齐img标签;图像的默认对齐是 vertical-align：baseline; - 这是引入下面的空间的行为。 Normalize的作者认为这种行为是一致的跨浏览器，因此决定不归一化这一点。我想这是有意义的，如果你想要坐在图像旁边的文本与任何随后的文本行正确对齐。有些人还喜欢使用 vertical-align：middle 而不是top来解决此问题 - 因此您可以随意更改。

然而，对于基线对齐，在我有一个图像是如此之大，以至于它高于行高，我可能会浮动它或一些其他行为反正...的情况下...但你去了。

我使用垂直对齐的东西一段时间，没有任何事件。但是，和往常一样，请确保您测试图像不再与基线对齐的任何影响。

I have this annoying space under my picture for no reason. I'm using www.getskeleton.com as the framework.

HTML code

<div class="four columns bottom">
  <div class="box">
    <img src="images/picture.png" title="" alt="">
  </div>
</div>

CSS code

.box{
  border: 1px solid #bfbfbf; /* ---- Border OUTSIDE*/
}

解决方案

Although I'm sure this has since been resolved, I believe none of these answers are correct (or at least, the link from the "accepted" answer is dead).

The way to deal with this spacing issue (and why it isn't set in util libraries like normalize I'm not sure) is vertical alignment of the image. This'll solve it for HTML pages when using the HTML 5 doctype. Oddly, when using e.g., HTML 4.01 doctype, images will not exhibit this errant space below behaviour.

The fix:

img {
  vertical-align: top;
}

I hope that helps someone who may have run into this problem.

Edit: Some extra info I noticed after writing this and subsequently researching why normalize doesn't set alignment on the img tag; the default alignment for images is vertical-align: baseline; - that's the behaviour which introduces the space underneath. Normalize's author believes this behaviour is consistent cross-browser, and so has decided not to 'normalize' this. I suppose that makes sense if you wanted text sitting next to an image to align properly with any subsequent lines of text. Some people also prefer to use vertical-align: middle as opposed to top to address this issue - so you can vary this as you wish.

However, regarding baseline alignment, in the case where I had an image that was so big that it was higher than the line-height, I'd probably be floating it or some other behaviour anyway... but there you go.

I've used the vertical-align stuff for a while now without any incident. But as always, do ensure you test for any repercussions for images no longer being aligned to the baseline.

这篇关于<img>下的空格标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！