Margin Extends Beyond Parent

[akeenlabs]

Let’s say I have a parent div that contains an element with a top margin. Why does the margin from the child element extend beyond the top of the parent? The child element still appears at the top-left of it’s parent while it appears that the parent element has the margin. How come the child is not constrained to it’s parent. If the child’s top margin was 20px, I would expect the child element to start 20px from the top it’s parent.

[cybershot]

try putting a position: relative to the parent and position: absolute to the child.

[akeenlabs]

Thanks wolfcry…I can’t imagine an article that addressed the problem I was having more accurately. In fact, the instance which finally moved me to make this post was actually the h1 inside a header div :)

At least now I understand why; I’m not sure I like it, but at least I understand it and know how to work around it.

[Anonymous]

I’ve had issues with this in the past and, while I understand why it works this way, I still think it’s kind of weird. I’m not sure I like that the browser “assumes” what I’m wanting instead of just letting me define exactly what I want. Something else that would be a good addition to the spec would be “box-sizing: margin-box;”. I think it would be very useful to say, “I want a box that’s 100px by 100px regardless of how much padding, border, and margin I put on it.” Anyway, just some thoughts on this 2.5 year old post!

[Author]

Posts