CODEWITHSUNDEEP
htmlcss
Adrift
Adrift

Reputation: 59859

Strange behavior regarding inline-block elements and margins within a container

Here is the jsfiddle

In my example, giving either of the children elements a bottom margin causes its sibling to be pushed down by whatever margin I specify; I hadn't anticipated seeing anything move since the container is larger than each div. Why is this the case?

HTML

<div class=container>

    <section></section>
    <aside></aside>

</div>

CSS

.container {
background: whitesmoke;
height: 12em;
width: 12em;
}

.container section {
background: slategray;
display: inline-block;
height: 04em;
margin-bottom: 20px;
width: 04em;
}

.container aside {
background: gold;
display: inline-block;
height: 04em;
width: 04em;
}

Upvotes: 1

Views: 397

Answers (1)

kapa
kapa

Reputation: 78751

Add vertical-align: top to your section element. As these elements are ìnline-block, they are not simply behaving as boxes anymore - they have flowing text properties. It is not really the margin that is pushing down the other element, it is the default vertical-align property they have.

Upvotes: 3

Related Questions