大图像增加了额外的空间

【问题标题】：Large image adds extra space大图像增加了额外的空间
【发布时间】：2016-05-30 02:11:41
【问题描述】：

我有一个由 3 个块组成的板，每个块由 25 个包含图像的方格组成。这 25 个正方形的大小为 40x40 像素，边距为 2 像素，总大小为 44x5 = 220 像素 x 220 像素。每个正方形将有 5px 上方和 5px 下方。

如果我改为将第一个块修改为仅包含一个包含 220x220px 图像的单个 220px x 220px 正方形，它会在该正方形下方和接下来的两个正方形上方添加一些空间。

所以，第一个方格将在其下方 7px 而不是 5，其余两个方格将在其上方有 7px 而不是 5。我无法弄清楚这个额外间距是从哪里来的。

起初我认为这可能与使用内联块有关，但我尝试了许多不同的“黑客”，包括将字体大小设置为 0，但我没有尝试过似乎可以解决这个问题。

即使我将所有 HTML 代码放在没有空格的单行上，额外的空格仍然会显示出来。

下面是我的代码。如果您运行它（最好是全屏）并仔细观察粉红色的框，您会注意到它与其他框并不完全对齐。它在粉红色框下方添加 2px，在其他两个框上方添加 2px。这个额外的空间是从哪里来的，我该如何解决？

如other SO pages 所示，内联图像（因此内联块）在其下方有一个空格。更改要显示的小图像：块可以解决问题，但是我不清楚为什么此更改可以解决问题。测量像素时，似乎首先在图像下方没有添加空白。唯一的额外空间似乎出现在外部块之外。

.board {
        background-color: #05a;
	font-size: 0;
}

.block {
        padding: 5px;
        border: inset #000  1px;
        display: inline-block;
        width: 220px;
        height: 220px;
        margin: 5px;
        font-size: 0;
        background-color: green;
}

.square {
        margin: 2px;
        width: 40px;
        height: 40px;
        background-color: yellow;
        display: inline-block;
        font-size: 0;
}

.image40 {
	width: 40px;
	height: 40px;
	display: inline-block;
	background-color: white;
	font-size: 0;
}

.large_square {
        margin: 0px;
        width: 220px;
        height: 220px;
        background-color: yellow;
        display: inline-block;
        font-size: 0;
}

.image220 {
	width: 220px;
	height: 220px;
	display: inline-block;
	background-color: pink;
	font-size: 0;
<div>Board #1:</div>

<div class="board">
<div class='block'><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div></div>

<div class='block'><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div></div>

<div class='block'><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div></div>

</div>

<div>Board #2:</div>

<div class="board">
<div class='block'><div class='large_square'><div class='image220'></div></div></div>

<div class='block'><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div></div>

<div class='block'><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div></div>

</div>

【问题讨论】：

标签： html css


【解决方案1】：

用下面的css替换可能会解决问题，html没有问题

.large_square {
    margin: 0px;
    width: 220px;
    height: 218px;
    background-color: yellow;
    display: inline-block;
    font-size: 0;
    clear: both;
}
.image220 {
    width: 220px;
    height: 218px;
    display: inline-block;
    background-color: pink;
    font-size: 0;
    clear: both;
}

【讨论】：

  • 由于我的图像大小为 220 x 220 像素，显然，这不是我正在寻找的解决方案。
【解决方案2】：

请尝试将 img 更改为块级元素。

.image40 {
 width: 40px;
 height: 40px;
 display: block;
 background-color: white;
 font-size: 0;
  }

【讨论】：

  • 这行得通，但为什么呢？此外，我稍微简化了代码以粘贴到 Stack Overflow。原来的使用了一个实际的 元素，而不是一个带有 .image40 的 div，所以默认情况下它是一个内联元素。我已将小图像更改为显示为块，并且可以正常工作。但是为什么这会起作用？额外的空间最初是从哪里来的？
  • 图像像文本一样渲染。每个文本下方都有一个空格。如需进一步说明，您可以访问stackoverflow.com/questions/5804256/…
  • 那么为什么空白问题出现在块之外而不是图像之外？
  • 就在图片下方。
  • 但空白显示在第一个 .block 下方，第二个和第三个 .block 上方。
【解决方案3】：

这个额外空间的原因是浏览器在inline-block 元素之间呈现空白。有许多解决方案，例如注释掉或删除空格或使用display:inline-block; 的替代品，例如float:left;（这将要求父元素具有overflow:auto;。

.board {
        background-color: #05a;
        font-size: 0;
        overflow:auto;
}

.block {
        padding: 5px;
        border: inset #000  1px;
        display: inline-block;
        float:left;
        width: 220px;
        height: 220px;
        margin: 5px;
        font-size: 0;
        background-color: green;
        overflow:auto;
}

.square {
        margin: 2px;
        width: 40px;
        height: 40px;
        float:left;
        background-color: yellow;
        display: inline-block;
        font-size: 0;
}

.image40 {
	width: 40px;
	height: 40px;
	display: inline-block;
	background-color: white;
	font-size: 0;
}

.large_square {
        margin: 0px;
        width: 220px;
        height: 220px;
        background-color: yellow;
        display: inline-block;
        font-size: 0;
}

.image220 {
	width: 220px;
	height: 220px;
	display: inline-block;
	background-color: pink;
	font-size: 0;
<div>Board #1:</div>

<div class="board">
<div class='block'><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div></div>

<div class='block'><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div></div>

<div class='block'><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div></div>

</div>

<div>Board #2:</div>

<div class="board">
<div class='block'><div class='large_square'><div class='image220'></div></div></div>

<div class='block'><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div></div>

<div class='block'><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div></div>

</div>

another question 的答案提供了更全面的解决方案列表。

【讨论】：

  • OP 说他们已经尝试了许多 inline-block 空白修复
  • 我刚刚添加了一个实现float 属性的工作示例。
  • 不，看看 5x5 白色方块网格下的额外绿色空间。这就是OP所说的关于5x44 = 220的内容，但是正方形没有对齐。底部的绿色“填充物”比块上的其他任何地方都厚，我们不知道为什么。让blocks 排队只是问题的一部分，可以通过vertical-align: top on block 快速解决
  • 没有，父元素的大小过大 1 或 2 个像素时存在问题。请参阅 OP 的 sn-p。父 (.block) 和子 (.square) 之间的距离由.block 上的padding 和2px 上的5px 和2px 上的margin 计算。如果 OP 也希望对齐，那么他们需要将 .large_square 的 width 和 height 减少到 216px 并设置其 padding:2px;。
  • 实际上，这确实解决了问题，但是即使整个 HTML 代码包含在没有空格的单行中，您知道使用 inline-block 方法的额外空间是从哪里来的吗？
【解决方案4】：

将overflow: hidden 或vertical-align: top 添加到block 让您更接近。还在看小方块下的多余空间

【讨论】：

  • 小方块确实有 2px 的边距。但是，正方形 (40x40) 与边距相结合，创建了一个 44px x 44px 的正方形。由于有一个 5 x 5 的网格，总共包含边距，这将创建一个 220px x 220px 的区域。 large_square 正好是 220px x 220px，所以 0px 的边距应该占据相同的区域。我正在使用 Firefox，并尝试使用 Firefox Inspector 和 Firebug 进行检查。两者都显示了盒子模型，但都没有指出额外的 2px 来自哪里。
  • 好吧，这似乎可行，但是当它们的大小都是 220px 时会溢出什么？
  • 不确定，但vertical-align: top 上的block 也可以使用并且更有意义
  • 老实说，我不知道是什么导致了 5x5 下的额外空间。这真的很奇怪。你的数学是正确的，你的标记中没有空格会导致内联空格被渲染。我会继续寻找
  • 是的，即使我将正文中的所有内容都放在一行中，我仍然遇到问题。这真的很奇怪。感谢您的帮助！
【解决方案5】：

在block上添加vertical-align:top

.block {
    background-color: green;
    border: 1px inset #000;
    display: inline-block;
    font-size: 0;
    height: 220px;
    margin: 5px;
    padding: 5px;
    vertical-align: top;
    width: 220px;
}

【讨论】：

  • 但是你知道是什么导致这个空白首先发生吗？即使我将正文中的所有内容放在一条线上，它仍然存在这个问题。
猜你喜欢
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode