html - 标签下的空格

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

虽然我确信这已经解决了，但我相信这些答案都不是正确的（或者至少，来自“已接受”答案的链接已经失效）。

处理这个间距问题的方法（以及为什么它没有在像 normalize 这样的 util 库中设置，我不确定）是图像的垂直对齐。当使用 HTML 5 文档类型时，这将解决 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
}