How to remove margin between div elements [duplicate]

Question

Why is there a margin between divs? I tried to remove it by different methods but nothing worked. I had to reduce their width to stack them in rows.

*{
  box-sizing: border-box;
}

.wrapper{
  background-color: #ccc;
  width: 500px;
  margin: 5% auto;
  padding: 0;
}

.box{
  display: inline-block;
  margin: 0px;
  background-color: #f1f1f1;
  width: 248px;
  height: 250px;
  border: 0 !important;
  font-size: 0;
}

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Answer 1

Make the width of .box 250px and add an attribute of 'float: left' to .box

.box{
display: inline-block;
margin: 0px;
padding: 0;
background-color: #ff9900;
width: 250px;
height: 250px;
float: left;
}

Fiddle

Answer 2

Due to your display: inline-blocks, the white spaces appear in between your block elements.

There are many resolutions to the same, refer to David Walsh's blog

What I would prefer to do here is use float instead of display: inline-block.

Refer code:

*{
  box-sizing: border-box;
}

.wrapper{
  background-color: #ccc;
  width: 500px;
  margin: 5% auto;
  padding: 0;
}

.box{
  float: left;
  margin: 0px;
  background-color: #f1f1f1;
  width: 248px;
  height: 250px;
}

<div class="wrapper">
  <div class="box">
    
  </div>
  <div class="box">
    
  </div>
  <div class="box">
    
  </div>
  <div class="box">
    
  </div>
</div>