How to remove margin between div elements

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>

Try experimenting with font-size:0px; on the wrapper because there is a space between your divs in your html code. — phip1611, Jan 25 '17 at 12:02
Question has been answered here before - http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements — larrydalmeida, Jan 25 '17 at 12:05

score 3 · Answer 1 · answered Jan 25 '17 at 12:04

3

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

answered Jan 25 '17 at 12:04

Pat Dobson

3,249
2
19
32

score 2 · Answer 2 · answered Jan 25 '17 at 12:04

The problem is that there are spaces between the div's. Two possible solutions:

1:

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

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

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

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

  </div>
</div>

-

.box { display: block; } // not multiple elements in one line, if you want this

2:

.wrapper { font-size: 0px; }
.box { display: block; } // not multiple elements in one line, if you want this

score 2 · Accepted Answer · answered Jan 25 '17 at 12:07

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>

score 2 · Answer 4 · answered Jan 25 '17 at 12:17

Its not margin what is causing space between two div its because of display:inline-block which you have added to box class, just add float: left; to same and it will go away.

*{
  box-sizing: border-box;
}

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

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

<div class="wrapper">
  <div class="box" style="background: rebeccapurple;">
    
  </div>
  <div class="box"  style="background: orange;">
    
  </div>
  <div class="box" style="background: orange;">
    
  </div>
  <div class="box" style="background: rebeccapurple;">
    
  </div>
</div>

score 1 · Answer 5 · answered Jan 25 '17 at 12:01

1

Try setting border: 0 !important on all divs affected, once I had a similar problem and found that the divs were inheriting a 1px border that was breaking the width.

answered Jan 25 '17 at 12:01

don

4,113
13
45
70

1

didn't work. there is no border on divs. – Anurag Awasthi Jan 25 '17 at 12:04

score 1 · Answer 6 · answered Jan 25 '17 at 12:05

You are displaying them as inline blocks, so the white space between them in the formatting of your code is still being displayed just as it would had they been any other inline element.

You need to reformat your code, or set the wrapper to have a zero font size so they do not get rendered.

M. K Hossain · Answer 7 · 2017-01-25T17:28:10.433

Try using

*{
  box-sizing: border-box;
}

.wrapper{
  background-color: #ccc;
  width: 500px;
  margin: auto;
  padding: 0;
   display: block;
   background: green;
}

.box{
  display: block;
  margin: 0px;
  width: 248px;
  height: 250px;
  background: red;
  padding: 0;
  float: left;
}

Display: inline-block creating that margin. Or may be you could try .wrapper{font-size: 0;} .box{ display:inline-block;}

How to remove margin between div elements

7 Answers7