<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: middle而不是top来解决此问题 - 因此您可以根据需要改变这一点。

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

我已经使用了vertical-align的东西一段时间没有任何意外。但与往常一样，请确保测试不再与基线对齐的图像的任何影响。

Answer 2

试试这个：

.box img {
    display: block;
    padding: 0px;
    margin: 0px;
}

Answer 3

试试这个：.box {font-size：0; }

Answer 4

您的图片需要浮动。试试这个：

    #yourimage{
        float: left;}

Answer 5

如上所述，更多的信息会有很大的帮助，但我毫不怀疑它是填充物导致边框走出图像，原因很简单就是

margin pushes outside the element
padding pushes inside the element

原样。

然后修复：

.box {
    padding-bottom: 0px;
}
//to be sure that the image doesn't have any padding, even though OP said the .box img fix didn't help
.box img {
    margin-bottom: 0px;
}

Answer 6

这是一个古老的怪癖 - 你的行格式化的空白导致了这个空白。加 图片后<br />。