Html 大图像增加了额外的空间

我有一块由3个块组成的板，每个块由25个包含图像的正方形组成。25个正方形的尺寸为40x40px，总尺寸为44x5=220px x 220px，边距为2倍。每个正方形的上方和下方各有5px

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

因此，第一个正方形的下方是7px，而不是5，其余两个正方形的上方是7px，而不是5。我不知道这个额外的间隔是从哪里来的

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

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

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

如内联图像（因此内联块）所示，它们下面有一个空格。将小图像更改为“显示：块”修复了该问题，但我不清楚为什么此更改会修复该问题。当测量像素时，首先似乎没有在图像下添加空白。唯一的额外空间似乎出现在外部块之外

.board{
背景色：#05a；
字号：0；
}
.街区{
填充物：5px；
边框：插图000 1px；
显示：内联块；
宽度：220px；
高度：220px；
保证金：5px；
字号：0；
背景颜色：绿色；
}
.广场{
保证金：2倍；
宽度：40px；
高度：40px；
背景颜色：黄色；
显示：内联块；
字号：0；
}
.image40{
宽度：40px；
高度：40px；
显示：内联块；
背景色：白色；
字号：0；
}
·大邱广场{
边际：0px；
宽度：220px；
高度：220px；
背景颜色：黄色；
显示：内联块；
字号：0；
}
.图像220{
宽度：220px；
高度：220px；
显示：内联块；
背景颜色：粉红色；
字体大小：0；

Board#1：
董事会#2：

添加

溢出：隐藏

或

垂直对齐：顶部

到

块

让您更靠近。仍在查看小正方形下的额外空间

添加

垂直对齐：顶部

到

块

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

---

产生此额外空间的原因是浏览器正在呈现

内联块

元素之间的空白。有许多解决方案，例如注释掉或删除空白，或者使用

显示：内联块；

的替代方案，例如

浮动：左；

（这将要求父元素具有

溢出：auto；

）

.board{
背景色：#05a；
字号：0；
溢出：自动；
}
.街区{
填充物：5px；
边框：插图000 1px；
显示：内联块；
浮动：左；
宽度：220px；
高度：220px；
保证金：5px；
字号：0；
背景颜色：绿色；
溢出：自动；
}
.广场{
保证金：2倍；
宽度：40px；
高度：40px；
浮动：左；
背景颜色：黄色；
显示：内联块；
字号：0；
}
.image40{
宽度：40px；
高度：40px；
显示：内联块；
背景色：白色；
字号：0；
}
·大邱广场{
边际：0px；
宽度：220px；
高度：220px；
背景颜色：黄色；
显示：内联块；
字号：0；
}
.图像220{
宽度：220px；
高度：220px；
显示：内联块；
背景颜色：粉红色；
字体大小：0；

Board#1：
董事会#2：

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

.image40 {
 width: 40px;
 height: 40px;
 display: block;
 background-color: white;
 font-size: 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;
}

---

小正方形的边距为2px。但是，正方形（40x40）结合边距，创建一个44px x 44px的正方形。因为有一个5 x 5的网格，加上边距，这将创建一个220px x 220px的区域。大的_正方形正好是220px x 220px，所以有一个0px的边距应该占据相同的区域。我正在使用firefox，并尝试使用firefox Inspector和Firebug进行检查。Both显示了盒子模型，但都没有指出额外的2px是从哪里来的。好吧，这似乎可行，但当它们都是220px大小时会溢出什么？不确定，但

垂直对齐：top

on

block

也起作用，更合理。我不知道是什么原因导致5x5下的额外空间。这是真的奇怪的是。你的数学是正确的，标记中没有空格会导致内联空格被渲染。我会继续查找是的，即使我将正文中的所有内容都放在一行中，我仍然有这个问题。这真的很奇怪。谢谢你的帮助！OP说他们已经尝试了许多

内联块

空格修复我只是添加了一个实现

float

属性的工作示例。不，看看5x5白色正方形网格下的额外绿色空间。这就是OP所说的5x44=220，但正方形没有对齐。绿色的“填充”底部比块上的任何其他地方都厚，我们无法找出原因。让

块

s对齐只是问题的一部分，可以通过

垂直对齐：顶部

在

块

上快速解决。不，父元素的大小过大了1或2个像素。请参阅OP的片段。t父对象（

.block