Why isn't the background css color showing?

Question

Can anybody explain why no background color is displayed in the outermost div in the space of the inner div's margin?

<div style="background-color:yellow;">
    <div style="margin-top:10px;background-color:black;color:white;">
        Why isn't the background color yellow inside my top margin?
    </div>
</div>

Matt Sisto · Answer 1 · 2013-09-12T18:31:02.390

4

Divs are block elements, but they take up no space on their own (other than creating a line break) so your inner div is filling all available space within the outer div, masking the yellow background. Add some padding to the outermost div and you will see the yellow.

edited Sep 12 '13 at 18:31

answered Sep 12 '13 at 18:24

Matt Sisto

116
5

This doesn't explain the margin. – BoltClock Sep 12 '13 at 18:30
My bad! Another comment links to this article on [collapsing margins](http://reference.sitepoint.com/css/collapsingmargins). That'll do it. – Matt Sisto Sep 12 '13 at 18:32

score 2 · Accepted Answer · edited May 23 '17 at 12:05

This is known as "margin collapse".

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

As found in other answers, adding padding or border to the parent will prevent the margins collapsing.

I also had success applying the following CSS to the container, based on tarkabak's method described here. (Please note limited browser compatibility of :before and :after.)

.prevent-margin-collapse:before,
.prevent-margin-collapse:after
{
    content: "\00a0"; /* No-break space character */
    display: block;
    overflow: hidden;
    height: 0;
}

<div style="background-color:yellow;" class="prevent-margin-collapse">
    <div style="margin-top:10px;background-color:black;color:white;">
        Why isn't the background color yellow inside my top margin?
    </div>
</div>

http://jsfiddle.net/yCHkW/

Onkel Toob · Answer 3 · 2013-09-12T19:01:03.200

1

In addition to the other answers: This is a matter of collapsing margins. The section "Collapsing Margins Between Parent and Child Elements" should apply in this specific case.

Update: Here's a statement regarding this topic taken directly from the box model specification of CSS3 (you can find almost the same sentence within the CSS2 specification as well):

Certain adjoining margins combine to form a single margin. Those margins are said to “collapse.” Margins are adjoining if there are no nonempty content, padding or border areas or clearance to separate them.

edited Sep 12 '13 at 19:01

answered Sep 12 '13 at 18:27

Onkel Toob

2,152
1
17
25

This is *the* answer, although you'll want to quote an excerpt from that section so the answer can stand on its own. – BoltClock Sep 12 '13 at 18:31
@BoltClock You're right, thanks for the tip. I updated my answer. – Onkel Toob Sep 12 '13 at 19:01

score 0 · Answer 4 · answered Sep 12 '13 at 18:23

0

To achieve what you want to see change your html as followed:

<div style="background-color:yellow; padding-top:10px;">
    <div style="background-color:black;color:white;">
        Why isn't the background color yellow inside my top margin?
    </div>
</div>

The reason is that the outer div has no width set and just takes the size of its content.

answered Sep 12 '13 at 18:23

Sven Bieder

5,515
2
21
27

Then correct me please when it is not a matter of collapsing margins – Sven Bieder Sep 12 '13 at 18:32
It is a matter of collapsing margins. – BoltClock Sep 12 '13 at 18:37

score 0 · Answer 5 · answered Sep 12 '13 at 18:24

0

I would imagine it has something to do with not inheriting any properties from elsewhere.

<div style="background-color:yellow; position: fixed;">
   <div style="margin-top:10px;background-color:black;color:white;">
        Why isn't the background color yellow inside my top margin?
    </div>
</div>

http://jsfiddle.net/rJ3HG/

answered Sep 12 '13 at 18:24

Ryan

494
1
5
10

1

with using `position:fixed` I would be very careful. That can easily destroy your complete page layout. – Sven Bieder Sep 12 '13 at 18:27
That is very true. The answer above mine does make more sense. – Ryan Sep 12 '13 at 18:28

Why isn't the background css color showing?

5 Answers5