这些白线来自哪里?

时间:2013-04-04 09:30:44

标签: html css

请看一下这个链接: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;
}

2 个答案:

答案 0 :(得分:2)

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

Chrome inspector

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

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

答案 1 :(得分: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;

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