下空间<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来解决这个问题 - 所以你可以随意改变它。

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

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

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 /> 。

Answer 7

尝试这个

.box{
    display:flex
}