css - Why can't I margin the div, why do I have to margin the child to margin the div?

Question

This has 2 fixes...which is really weird to me.

1: If I remove the tag #MARGIN-30 and Remove the tag #Nav-bar under margin-3 it fixes itself when I reapply said tags.

2: If I add overflow:hidden;

The question is, is anyone able to assist me with the reason for this happening, like...I've never had this on any prior project or learning experience with css.

标签： cssmargin

Answer 1

It appears as though you are falling victim to Margin Collapse. It's just one of those many things that are a bit weird in HTML/CSS.

The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.