The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › CSS › Margin-top problem
When i add margin-top: 20px; on my #iconCircle the section #aboutMe move down instead of the circle. What am i doing wrong?
Basiclly i want the red circle to be moved down a few pixels.
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
Dude, thank you so much! Now i can countinue with my project.