Margin-top problem

[Magnus.Nilsson]

Hi.

When i add margin-top: 20px; on my #iconCircle the section #aboutMe move down instead of the circle. What am i doing wrong?

my code:
code

Basiclly i want the red circle to be moved down a few pixels.

[Senff]

You’re not doing anything wrong — this is how it works usually when the first child has a top margin, it will assign the margin to the container due to margins collapsing.

I read a detailed, easy-to-understand explanation about this once but of course I can’t find it now. Here’s more theoretical info about it: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

There’s a few options you could use. You could give the #aboutme section overflow:hidden; or overflow:auto; Or you could give it a top padding instead of giving the circle a top margin. Or you could give the container a top border of 20 px.

Edit: here you can read about some underlying reasons for why this happens: http://stackoverflow.com/questions/12632125/inner-divs-margin-affecting-containing-divs-margin

[Magnus.Nilsson]

Dude, thank you so much! Now i can countinue with my project.

[Author]

Posts