ts248 ts248 - 1 year ago 63
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">

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.


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

Dai Dai
Answer Source

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.