0

看看这个链接：LINK

正如你所看到的，它是一个由每个大小为 20x20(px) 的红色 div 组成的矩阵。它们之间应该没有空格，但行之间有白线。我认为这是因为我使用了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;
}
4

2 回答 2

2

使用float会起作用，因为声明它也会静默地将显示属性设置为block（参见下图来自 Chrome 检查器：

铬检查员

您看到的差距是因为您正在使用inline-block. 这是（我相信）为诸如“p”和“q”之类的字母的后裔保留的空间。关键是vertical-align属性，默认情况下设置为baseline。如果您将其设置为其他值（top, bottom），则间隙将被删除（请参阅this fiddle）。

因此，float如果这适合您的目的，请使用它，但如果您需要 的其他好处inline-block，则将其与声明的垂直对齐一起使用。

于 2013-04-04T09:50:30.847 回答
0

试试这个：

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;

更改显示属性。阻挡并漂浮到左边！

于 2013-04-04T10:24:32.720 回答