What causes this behavior when I use the margin in CSS?

1

I’m trying to use margin to crate a gap between my outer div and inner div at the top. However, when I set margin-top to anything it creates a margin outside the outer div instead. I’ve attached an image to hopefully make this clearer. The first image is what I get when I’ve tried to use margin-top and the second is what I was aiming for.

Image and codepen.

#timer-div{
  height : 70%;
  background-color : red;
}

#timer-circle {
  background-color : blue;
  margin : 5% 25%;
  width : 50%;
}

I can solve this by using padding-top on #timer-div instead of #timer-circle but I want to understand why margin-top on #timer-circle doesn’t work.

Thanks!

2

Hi BLBaylis,

I have found this: https://stackoverflow.com/questions/2680478/margin-top-push-outer-div-down
Reading the second top answer I tried to put a margin-top on both the circle and div. The highest of both value would be used to have a unique margin for the timer-div element.

When defining margin-top > 0 on the timer-div, the margin on the timer-circle works as intended.

Here is a good short read on the problem: https://css-tricks.com/what-you-should-know-about-collapsing-margins/