CODEWITHSUNDEEP
htmlcssmargin
Raine Revere
Raine Revere

Reputation: 33647

Another css margin-top issue... is it really collapsing?

In this fiddle, I'm wondering why the blue div does not fully contain the child, since the margin is on the child inside the container (i.e. why the space is white on top instead of blue).

<div id="container">
  <div id="box"></div>
</div>

...

#container {
  background-color: dodgerblue;
}

#box {
  width: 100px;
  height: 100px;
  margin: 50px;
  background-color: wheat;
}

As far as I can tell, this is not a collapsing margin issue, because only there aren't two margins to collapse; only the child box has a margin.

Note: I'm looking for the why. I know that making the container a Block Formatting Context (demonstrated here), fixes the problem (e.g. overflow:auto).

Upvotes: 0

Views: 64

Answers (2)

Arbel
Arbel

Reputation: 30999

Why: Collapsing margins doesn't mean you need to define a margin for the parent element, the parent element has a margin which is automatically calculated by the browser and applied to the element.

Actually, it is because of the collapsing margins of CSS Box model definition:

CSS 2.1 8.3.1 Collapsing margins

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.

From the definition:

Margins of inline-block boxes do not collapse (not even with their in-flow children).

So one way is to change the display of #box to inline-block to avoid this behavior.

To not touch the display type, another way is to use padding for the spacing.

Another way is to add border of the same color to #box. If you do this make sure you also have box-sizing: border-box; on #box (-moz-box-sizing: border-box; for FireFox or Gecko browsers) (Borders prevent margins from collapsing)

Question asked in comments: Why adding a 1px padding prevents margins from collapsing?

From box model definition:

Adjoining vertical margins collapse.

. . .

(One of the conditions for two margins to be adjoining)

No line boxes, no clearance, no padding and no border separate them.

So by definition, if you add 1px padding then the margins are not adjoining anymore and collapsing doesn't happen.

Upvotes: 2

user3754372
user3754372

Reputation: 187

i am afraid its not gonna be an answer that will satisfy you. margins work that way. margins are allowed to overflow the parent element. they are just meant to create space between the element that margin is on and any other content around it. if there was some content inside parent element before the #box, it would take the margin inside. consider this http://jsfiddle.net/BJYLF/2/

<div id="hnb">hnb</div>
<div id="container">
hnb
<div id="box">
</div>
</div>

in essence, margin is to have space between content not container elements. two adjacent box having content with equal margin will overlap each other's margin for the same reason.

As for overflow, it is working cos auto is not the default. http://www.w3schools.com/cssref/pr_pos_overflow.asp

Upvotes: 0

Related Questions