rsm rsm - 5 months ago 12
HTML Question

`margin: 0;` not working on child divs

I'm having problems to remove the margin of child divs. I'd like to have the squares defined at

#overview > div
next to next.



#overview {
display: inline-block;
margin: 0em;
padding: 0em;
background: green;
}

#overview > div {
width: 1.5em;
height: 1.5em;
display: inline-block;
margin: 0;
border-bottom: 2px solid black;
}

div.type1 {
background: #990099;
}

div.type2 {
background: #000080;
}
div.type3 {
background: #734d26;
}

div.type4 {
background: #990000;
}

<div id="overview">
<div class="type4"></div>
<div class="type2"></div>
<div class="type4"></div>
<div class="type2"></div>
<div class="type3"></div>
<div class="type2"></div>
<div class="type2"></div>
</div>





jsfiddle

I'd like to find a solution without floating the squares, and without setting negative margins!

Thanks for the help!

Answer

The browser is interpreting your newlines as blanks, and that's why it's adding spacing. Try removing them (it will be unreadable, but it will fix it without changing any css). The html:

<div id="overview">
    <div class="type4"></div><div class="type2"></div><div class="type4"></div><div class="type2"></div><div class="type3"></div><div class="type2"></div><div class="type2"></div>
</div>

And your css:

#overview {
    display: inline-block;
    margin: 0em;
    padding: 0em;
    background: green;
}

#overview > div {
    width: 1.5em;
    height: 1.5em;
    display: inline-block;
    margin: 0;
    border-bottom: 2px solid black;
}

div.type1 {
    background: #990099;
}

div.type2 {
    background: #000080;
}
div.type3 {
    background: #734d26;
}

div.type4 {
    background: #990000;
}

JSFiddle

Comments