Why there is a space around div

Question

Within the td I have four div. But I don't know how there is a little bit of margin like space created. And I can't seem to remove it.

If this is the behaviour of inline-block, then how to override this behaviour?

.box{
  width: 25%;
  height: 50px;
  background-color: red;
  display: inline-block;
}

<table style='width: 100%;'>
  <tr>
    <td>
      <div class='box'></div>
      <div class='box'></div>
      <div class='box'></div>
      <div class='box'></div>
    </td>
  </tr>
</table>

a simple google search and you got it ... https://www.google.com/search?ei=lLM0W4qLF8miU9v4vdAP&q=space+inline+block&oq=space+inline+block&gs_l=psy-ab.3..0j0i30k1j0i5i30k1l2j0i8i30k1l3.1929.2721.0.3016.2.2.0.0.0.0.190.347.0j2.2.0....0...1.1.64.psy-ab..0.2.345...0i13k1j0i13i30k1j0i13i5i30k1j0i8i13i30k1.0.393edJU6ZSw ... you may notice this is the 2nd frequent question asked on CSS — Temani Afif, Jun 28 '18 at 10:10

score -2 · Accepted Answer · edited Jul 04 '18 at 09:21

-2

Because there is white-space between the divs (line-break and spaces). ;)

.box {
  width: 25%;
  height: 50px;
  background-color: red;
  display: inline-block;
}

td {
  font-size: 0;
}

<table style='width: 100%;'>
  <tr>
    <td>
      <div class='box'></div>
      <div class='box'></div>
      <div class='box'></div>
      <div class='box'></div>
    </td>
  </tr>
</table>

edited Jul 04 '18 at 09:21

Akash Pinnaka

465
4
23

answered Jun 28 '18 at 09:55

eisbehr

12,243
7
38
63

score -3 · Answer 2 · answered Jun 28 '18 at 09:55

you can use float left instead of display inline block i think this is the best and simple to apply

.box{
  width: 25%;
  height: 50px;
  background-color: red;
  float:left;
}

<table style='width: 100%;'>
  <tr>
    <td>
      <div class='box'></div>
      <div class='box'></div>
      <div class='box'></div>
      <div class='box'></div>
    </td>
  </tr>
</table>

Why there is a space around div

2 Answers2