CSS crazyness inline-block unremovable margin

Question

Check the code below :

Why is there spaces beetwen the divs ? How can I remove them (without using float) ?

* {
  padding: 0px;
  margin: 0px;
}
.section {
  display: inline-block;
  width: 20%;
  min-height: 50px;
  box-sizing: border-box;
  border: solid 1px;
  /*float: left;*/
}

<div id="container">
  <div class="section">a</div>
  <div class="section">b</div>
  <div class="section">c</div>
  <div class="section">d</div>
  <div class="section">e</div>
</div>

Please check my previous answer: http://stackoverflow.com/a/26882886/3834042 — emmanuel, Nov 13 '14 at 12:54
Phew! There are so many dupes! I can't believe this question could be asked so many times and yet draw many votes on each of those!! — Abhitalks, Nov 13 '14 at 12:59
@moderator it is a duplicate question indeed. Thank you for deleting it — Dionys, Nov 13 '14 at 13:08

score 1 · Answer 1 · answered Nov 13 '14 at 12:56

There are a few ways to solve this. My favourite is:

* {
  padding: 0px;
  margin: 0px;
}

#container {
  letter-spacing: -0.32em;
}

.section {
  display: inline-block;
  width: 20%;
  min-height: 50px;
  letter-spacing: normal;
  box-sizing: border-box;
  border: solid 1px;
  /*float: left;*/
}

Here is a fiddle

score 1 · Answer 2 · answered Nov 13 '14 at 13:11

I believe the problem is that the divs are spaced by a line break, which is interpreted as a space in the resulting HTML.

Try changing it to:

<div id="container">
  <div class="section">a</div><div class="section">b</div><div class="section">c</div><div class="section">d</div><div class="section">e</div>
</div>

If you want to preserve some white space, simply include it in comments:

<div id="container">
     <div class="section">a</div><!--
  --><div class="section">b</div><!--
  --><div class="section">c</div><!--
  --><div class="section">d</div><!--
  --><div class="section">e</div>
</div>

Lastly, you can change display: inline-block; to display: table-cell, but then you will need to re-work the section width.

score 0 · Accepted Answer · answered Nov 13 '14 at 13:05

Best answer is @emmanuel one (see question comment). Even if there is no text, spaces beetwen divs does count.

* {
  padding: 0px;
  margin: 0px;
}
.section {
  display: inline-block;
  width: 20%;
  min-height: 50px;
  box-sizing: border-box;
  border: solid 1px;
  /*float: left;*/
}

<div id="container">
  <div class="section">a</div><!--
  --><div class="section">b</div><!--
  --><div class="section">c</div><!--
  --><div class="section">d</div><!--
  --><div class="section">e</div>
</div>

score 0 · Answer 4 · answered Nov 13 '14 at 13:08

0

Try this:-

<div id="container">
  <div class="section">a</div><div class="section">b</div><div class="section">c</div><div class="section">d</div><div class="section">e</div>
</div>

Demo

answered Nov 13 '14 at 13:08

Mukul Kant

7,074
5
38
53

CSS crazyness inline-block unremovable margin

4 Answers4