There is a parent block, 600 pixels wide, there are 3 blocks of 200 pixels each with display: inline-block;

But for some reason, they do not fit, and between them some indents. margin - 0, padding - 0 ..

What are these indents? When float: there is no such thing, all 3 blocks arise one after another.

<div id="test-bg"> <div class="test-block">1</div> <div class="test-block">2</div> <div class="test-block">3</div> </div> #test-bg{ width: 600px; height: 200px; border: 1px solid red; margin: 5px auto; box-sizing: border-box; } .test-block{ width: 200px; height: 200px; display: inline-block; border:1px solid orange; box-sizing: border-box; }

https://jsfiddle.net/mq9tnjp9/

  • one
    It is necessary to remove line breaks after the blocks, the point is that the tabulation works, and this is a space, because the browser cuts out all the repeated spaces, and you should also specify the left padding at -4 pixels for all elements after the first. margin-left: -4px; - Andrey Shpileva
  • Why specify the indent? .. - user190134
  • one
    Because at the very beginning of its existence, the linear unit was designed that way, namely, it mimics the space, and -4 removes it, of course, only visually! - Andrey Shpileva

1 answer 1

Since your blocks are lowercase, each block is considered a word, and there are spaces between the words in your case. You can set the test-bg block that wraps your test-block to font-size: 0; and spaces will disappear, as for me this is the easiest and most effective way ...

 #test-bg{ width: 600px; height: 200px; border: 1px solid red; margin: 5px auto; font-size:0; } .test-block{ width: 200px; height: 200px; display: inline-block; border:1px solid orange; box-sizing: border-box; } 
 <div id="test-bg"> <div class="test-block">1</div> <div class="test-block">2</div> <div class="test-block">3</div> </div>