Question

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

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

所以，第一个方格将比它低7个，而不是5个，剩下的两个方格将高于它们7px而不是5.我无法弄清楚这个额外间距来自何处。

起初我认为它可能与使用内联块有关，但我尝试了许多不同的黑客攻击。包括将font-size设置为0，但我尝试过的任何东西似乎都解决了这个问题。

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

以下是我的代码。如果你运行它（最好是全屏）并仔细观察粉红色的盒子，你会发现它与其他盒子没有完全对齐。它比粉红色盒子低2px，另外两个盒子高出2px。这个额外空间来自何处以及如何解决？

如other SO pages内嵌图像（以及内联块）中所示，它们下面有一个空格。更改要显示的小图像：块可以解决问题，但是我不清楚为什么这个更改会修复它。当测量像素时，首先在图像下似乎没有添加空白区域。唯一的额外空间似乎出现在外部区块之外。

＆＃13;

.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;

＆＃13;

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

＆＃13;

Answer 1

将overflow: hidden或vertical-align: top添加到block会让您更接近。仍然看着小方块下的额外空间

Answer 2

这个额外空间的原因是浏览器在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的答案。

Answer 3

在vertical-align:top

上添加block

.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;
}

Answer 4

请尝试将img更改为阻止级别元素。

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

Answer 5

替换为可能解决问题的以下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;
}

大图像增加了额外的空间

5 个答案: