Margin on child element moves parent element

Question

I have a div (parent) that contains another div (child). Parent is the first element in body with no

Answer 1

interestingly my favorite solution to this problem isn't yet mentioned here: using floats.

html:

css:

.parent{width:100px; height:100px;}
.child{float:left; margin-top:20px; width:50px; height:50px;}

see it here: http://codepen.io/anon/pen/Iphol

note that in case you need dynamic height on the parent, it also has to float, so simply replace height:100px; by float:left;