大图像增加了额外的空间

时间:2016-02-18 03:54:25

标签: html css

我有一块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;
&#13;
&#13;

5 个答案:

答案 0 :(得分:1)

overflow: hiddenvertical-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;
}