CODEWITHSUNDEEP
htmlcssmarginpadding
Thelambofgoat
Thelambofgoat

Reputation: 609

h1, h2, h3.. elements eats div margins

Why h1, h2, h3 elements margins are ignored when in div?

http://jsfiddle.net/TzmdZ/

<div class="col">
    <h3>This is header</h3>
</div>  
<div class="col">
    <h3>This is header</h3>
</div>

.col {
    background: gray;
    margin-bottom: 1em;
}

.col h3 {
    margin-bottom: 1em;
}

When I put h element into div and there is no other text in it, though h element and div element bottom margins are spicified, h bottom margin is ignored.

Upvotes: 2

Views: 6248

Answers (2)

Mohammad Areeb Siddiqui
Mohammad Areeb Siddiqui

Reputation: 10179

Try this CSS:

.col {
    background: gray;
    padding-bottom: 1em;
}

.col h3 {
    padding-bottom: 1em;
}

Change margin-bottom to padding-bottom.

jsFiddle

Upvotes: 0

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

Assigning margins to two siblings will cause the margins to collapse where the margins are adjacent.

This MDN document explains the situation in detail.

Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing.

Margin collapsing occurs in three basic cases:

  1. Adjacent Siblings
  2. Parent and first/last child
  3. Empty blocks

Upvotes: 4

Related Questions