Hello,
I am confused about the position of the red div (class=“marker one”). It has a margin: 10px auto, so there should be some space between the red and the black div (class=“container”) on the top, correct? But it is touching.
Can someone please explain? I tried searching online and AI help, but I’m not any wiser…
Here is my code: https://codepen.io/Rodromir/pen/VwJdmzO
Thanks!
Interesting question.
What margin in CSS does is add invisible spacing around the element it’s applied to, however this does not affect anything in the container it’s sitting in. What you’re thinking of is padding in the container. Add padding: 10px; to your .container element to see the space appear.
The thing is, the space around the red marker is there, but you can’t see it. It just spills out invisibly over the top of the .container.
Margins create space outside the element’s border, pushing other elements away. The margins push the .marker elements away from each other, but not away from the container’s edges.
Hope that helps,
Nicolas
I tried inspecting the page and I see that the inner div starts at another place than the outer div (and is overlapping it for some reason).
Here is what I mean:
Why “container” and “marker one” start at different places this way? Shouldn’t “marker one” start inside the “container” ?
I didn’t quite understand you there, but it seems to me the marker one does start inside container.
It may not appear like it, but it’s all to do with the overflow property of the container. Try setting the overflow to auto on your container styling and see your results.
Let me try to interpret the image you posted.
What you see in pink is the “marker one”.
What you see in shaded brown in its margin. See how it is equal above and below? That is the margin: 10px part of your marker one. See the long equal sides ? That is the auto margin part.And see how it spills over? That is because for your container, overflow is set to visible, which is the default. If you change it to auto you will get your desired result.
Are you following me? Sorry for the dense explanation.
Thank you nickrg,
I just thought that if I have a div inside another div and use margin-top: 10px on the inner, the inner one will “start” 10px from the top of the outer one.
I am looking on the overflow property and it is indeed solution, thanks! Not sure I understand what is “overflowing” in this case, but I will meditate on that a bit more 
Glad you got it.
What is overflowing? Well, in this case, marker one. Think of it, its margin is overflowing out of the top of the outer one, right?
We’re simply changing the setting of the container’s overflow, which means we’re defining how anything that spills out of the container behaves. Make sense? I hope so.
Let me know if you got that.
Thanks. I think my confusion is my presumption, that the margin of the inner div will be calculated from the top of the outer div. And it isn’t. It goes above the top of the outer one.
Yes. As long as overflow is left to default.
