0

Given the following markup:

<div>
    <p>Test test</p>
</div>

Setting the margin: 10px to the paragraph element should apply to both top and bottom, correct?

I have a simple example, and I don't quite know why it doesn't work.

http://jsbin.com/URumOFup/2/edit?html,css,output

This works as I expect it to if I give the div the rule of overflow: hidden. Can someone explain why this happens and if using overflow: hidden is the proper way to have the margins of p apply?

Charles
  • 50,943
  • 13
  • 104
  • 142
sergserg
  • 21,716
  • 41
  • 129
  • 182
  • 1
    I'm not sure, but isn't a div being a child of a p not proper HTML formatting? – Leeish Dec 22 '13 at 04:32
  • @Leeish at no point in my code am I nesting a div within a p tag. – sergserg Dec 22 '13 at 04:32
  • "If I have a div element and inside of that a p element" – Leeish Dec 22 '13 at 04:33
  • You're misunderstanding me. The `p` tag is inside the `div`. I'll edit the question to avoid confusion. – sergserg Dec 22 '13 at 04:34
  • I was and I apologize. I looked back and your original text was, "If I have a div element and inside a p element," – Leeish Dec 22 '13 at 04:35
  • I believe, and I'm not sure why, but if your first element in a parent element has a top margin, that top margin is applied outside the parent and not inside as expected. I've noticed this many times with tags – Leeish Dec 22 '13 at 04:36
  • I usually add padding to the parent rather than margin to the child. That's really what you want anyway, padding INSIDE the parent element. – Leeish Dec 22 '13 at 04:37
  • Your jsBin example is NOT showing what you mean. There aint no css for styling p tag. – Milche Patern Dec 22 '13 at 04:40
  • Here is an interesting reproduction: http://jsfiddle.net/AUHcQ/ . When inspected, you can see that the paragraph element has a margin to it, but the div somehow takes precedence or something. – Travis J Dec 22 '13 at 04:41
  • Since you have not given the height, width and float for the parent. it works that way. – Abel Raj Dec 22 '13 at 04:46

1 Answers1

0

The general meaning of "margin" isn't to convey "move this over by 10px" but rather, "there must be 10px of empty space beside this element."

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.

Adjoining vertical margins collapse, except:

  • Margins of the root element's box do not collapse.
  • If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block.

Since your outter DIV is not 'floated' .. top margin of inner element <p> will collapse to 0 for the first one, then collapse to a minimum spacing for other <p> tags.

Just 'float:left;width:100%' your div will solve your issue.

Margin-collapsing w3c reference

Community
  • 1
  • 1
Milche Patern
  • 19,632
  • 6
  • 35
  • 52