<img>标签下的空格

Question

我没有理由在我的照片下面有这个烦人的空间.我正在使用www.getskeleton.com作为框架.

HTML代码

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

CSS代码

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

Answer 1

虽然我确信这已经解决了,但我相信这些答案都不正确(或者至少,"接受"答案的链接已经死了).

处理这个间距问题的方法(以及为什么它没有在util库中设置,例如normalize我不确定)是图像的垂直对齐.当使用HTML 5 doctype时,这将解决HTML页面问题.奇怪的是,当使用例如HTML 4.01 doctype时,图像不会在行为下面显示这个错误的空间.

修复:

img {
  vertical-align: top;
}

我希望能帮助那些可能遇到这个问题的人.

编辑:写完这篇文章之后我注意到的一些额外信息,然后研究为什么normalize没有在img标签上设置对齐; 图像的默认对齐方式是vertical-align: baseline;- 这是引入下方空间的行为.Normalize的作者认为这种行为是跨浏览器的一致性,因此决定不对此进行"规范化".我想如果你希望文本坐在图像旁边与任何后续文本行正确对齐,那就更有意义了.有些人也喜欢用vertical-align: middletop而不是top来解决这个问题 - 所以你可以随意改变这个.

然而,关于基线对齐,如果我的图像太大而且高于线高,我可能会浮动它或其他一些行为......但是你去了.

我已经使用了垂直对齐的东西一段时间没有任何事故.但与往常一样,请确保测试不再与基线对齐的图像的任何影响.