Jofsey Jofsey -4 years ago 109
CSS Question

I set margin border and padding to 0. Why there is a space between elements?

I want no space between red rectangles, so I checked that all related properties are zero: margin, padding and border. But there is still space. Why? How can I fix it?



.outer {
height: 100px;
width: 600px;
background-color: grey;
}
.bar {
background-color: red;
height: 20px;
width: 45%;
display: inline-block;
margin-top: 20px;
}

<div class="outer">
<span></span>
<div class="bar"></div>
<div class="bar"></div>
</div>




Answer Source

The space comes from the line break. Either use floating elements or remove the whitespace between the two divs:

 .outer {
    height: 100px;
    width: 600px;
    background-color: grey;
}
.bar {
    background-color: red;
    height: 20px;
    width: 45%;
    display: inline-block;
    margin-top: 20px;
}
<div class="outer">
    <span></span>
    <div class="bar"></div><div class="bar"></div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download