How to remove margin between div elements [duplicate] - html

Question

This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
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>

Answer 3

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

Answer 4

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>

Answer 5

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.

Answer 6

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.

Answer 7

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;}