0

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>
henry
  • 3,653
  • 2
  • 23
  • 35
ERX95
  • 77
  • 9
  • 1
    Please post *actual* markup, not images of markup. – Scott Aug 31 '16 at 19:39
  • This is not duplicate. His problem is that he set margins on top and bottom. You need to set your margin this way: div {height: 15px; width: 15px; display: inline-block; margin: 0 -2px 0 -2px;} – Vcasso Aug 31 '16 at 19:50
  • or margin: 0 -4px 0 0; – Vcasso Aug 31 '16 at 19:50
  • @Valius79, It still doesn't work. – ERX95 Aug 31 '16 at 20:15
  • @Scott, I added the code. – ERX95 Aug 31 '16 at 20:15
  • 1
    @Valius79 - you *sure* about that? https://jsfiddle.net/j08691/5dbLm874/ – j08691 Aug 31 '16 at 20:16
  • @j08691, I tried that before, but if you look closely there is still a problem. Just look at the size of the squares(divs) on the first and last row. See the difference? – ERX95 Aug 31 '16 at 20:21
  • 1
    No, what should I be seeing? And BTW, your layout is dependent on the width of the user's browser. Also, in my fiddle I left the margin you set in your code. Probably wanna remove that. – j08691 Aug 31 '16 at 20:23
  • Ok, I achieved what you wanted by doing adding margin 0 and line height to the body element. body { margin: 0; line-height: 0; } – Vcasso Aug 31 '16 at 20:23
  • @j08691 just pointed out that what I claimed was fix wasn't, and he was right. I tested with one row only. The comment above worked for me on my comp. – Vcasso Aug 31 '16 at 20:25
  • 1
    @Valius79 this _is_ a duplicate. This is the between-inline-elements whitespace issue covered in the answer to the linked question – henry Aug 31 '16 at 20:27
  • Oh, my bad. Sorry for wasting your time guys! – Vcasso Aug 31 '16 at 20:28
  • @j08691 Yes, I had to remove the margin, it looks good now. Thanks for that! – ERX95 Aug 31 '16 at 20:33
  • @Valius79 all good! – henry Aug 31 '16 at 20:37

0 Answers0