0

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.

Trey
  • 17
  • 5
  • Just updated it and it fixed itself when I removed overflow:hidden; Sorry but I don't know how to ever via codepen? – Trey May 09 '21 at 03:09
  • We are definitely going to need some code. There's a way to put code in stack snippets (one of the buttons in the top bar of the editor), this has more information: https://stackoverflow.com/help/minimal-reproducible-example – Zachary Haber May 09 '21 at 03:15
  • I totally forgot to add the link, sorry about that https://codepen.io/Salt_Salt/pen/oNZgJbN – Trey May 09 '21 at 03:42

1 Answers1

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.

Zachary Haber
  • 10,376
  • 1
  • 17
  • 31