I have a HTML file with 2 types of divs, all of them are 15 x 15px, some of them red, the others green.
How can I eliminate that white space between the lines? I tried to add padding: 2px;
, there is no space after that, but the divs are getting bigger than I want. How can I get rid of that space, keeping the size I want(15 x 15px) for the divs?
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>