这些白线来自哪里？

Question

请看一下这个链接：LINK

正如你所看到的，它是一个红色div的矩阵，每个大小为20x20（px）。它们之间应该没有空格，但行之间有白线。我压缩它是因为我使用了display:inilne-block;。有没有其他方法可以做到这一点？他们为什么首先出现在那里？

.red {
    background: none repeat scroll 0 0 red;
    border: 0 none;
    display: inline-block;
    height: 20px;
    line-height: 0;
    margin: 0;
    outline: 0 none;
    padding: 0;
    width: 20px;
}

Answer 1

使用float会有效，因为声明它也会将显示属性静默设置为block（请参阅Chrome检查器下面的图片：

您看到的差距是因为您使用的是inline-block。它是（我相信）在诸如'p'和'q'之类的字母上为下意器保留的空间。关键是vertical-align属性，默认情况下设置为baseline。如果您将其设置为其他内容（top，bottom），则会删除差距（请参阅this fiddle）。

因此，如果符合您的目的，请使用float，但如果您需要inline-block的其他好处，请使用声明的垂直对齐方式。

Answer 2

试试这个：

background: none repeat scroll 0 0 #F00;
border: 0 none;
display: block;
height: 20px;
line-height: 0;
margin: 0;
outline: 0 none;
padding: 0;
width: 20px;
float: left;

更改显示屏attr。阻止并漂浮到左边！