Html 这些白线是从哪里来的？

请查看此链接：

正如您所看到的，它是一个红色div 20x20（px）的矩阵，每个div的大小。它们之间应该没有空格，但行与行之间有白线。我按了这是因为我使用了

display:ini块。还有别的办法吗？为什么他们一开始就出现在那里

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

使用
float
将起作用，因为声明它也会将显示属性静默地设置为
block
（请参见Chrome inspector的下图：


您看到的差距是因为您使用的是
内联块
。它（我相信）是为字母“p”和“q”上的降序保留的空间。关键是
垂直对齐
属性，默认情况下该属性设置为
基线
。如果您将其设置为其他属性（
顶部
，
底部
），然后将消除间隙（请参见）

因此，如果符合您的目的，请使用
float
，但如果您需要
inline block
的其他好处，请将其与声明的垂直对齐一起使用。
尝试以下方法：

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;

将显示属性更改为阻止并向左浮动