我有一块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内嵌图像(以及内联块)中所示,它们下面有一个空格。更改要显示的小图像:块可以解决问题,但是我不清楚为什么这个更改会修复它。当测量像素时,首先在图像下似乎没有添加空白区域。唯一的额外空间似乎出现在外部区块之外。
.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>
&#13;
答案 0 :(得分:1)
将overflow: hidden
或vertical-align: top
添加到block
会让您更接近。仍然看着小方块下的额外空间
答案 1 :(得分:1)
这个额外空间的原因是浏览器在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的答案。
答案 2 :(得分:0)
在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;
}
答案 3 :(得分:0)
请尝试将img更改为阻止级别元素。
.image40 {
width: 40px;
height: 40px;
display: block;
background-color: white;
font-size: 0;
}
答案 4 :(得分:0)
替换为可能解决问题的以下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;
}