我有一个包含2种div的HTML文件,所有这些都是15 x 15px,其中一些是红色,其他是绿色。
如何消除线条之间的空白?我试图添加padding: 2px;
,之后没有空格,但是div比我想要的要大。我怎样才能摆脱那个空间,为div保持我想要的尺寸(15 x 15px)?
div {
height: 15px;
width: 15px;
display: inline-block;
margin: -2px;
}
.used {
background-color: red;
}
.free {
background-color: green;
}
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>
<div class="free"></div>
<div class="free"></div>
<div class="free"></div>
<div class="used"></div>
<div class="used"></div>
<div class="used"></div>