ts248 ts248 - 7 months ago 16
HTML Question

CSS margins: Why does this layout behave this way?

I try to teach myself some CSS currently.

I have made this example-layout:



.group div {
width: 100px;
height: 100px;
background-color: orange;
display: inline-block;
text-align: center;
line-height: 100px;
font-size: 3em;
font-weight: bold;
color: white;
margin: 10px;
}

.wrap {
width: 500px;
height: 120px;
background-color: #efefef;
}

<div class="wrap">
<div class="group">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>





The div-elements within are all 100px width plus 10px margin-left and 10px margin-right. Sums up to 120px. 4 times 120px makes 480px.

=> It should fit into the wrap-element which has a width of 500px.

But it doesn't. The fourth element breaks into a new line. I have to increase the width to 510 for to fit it into one line.

Why?

Even with firebug I couldn't find a reason ...

Dai Dai
Answer

inline-blocks are like characters, which means spaces are counted in the width too. Remove spaces/new lines between divs to get what you what. Or switch to other layout method, like float: left.