Why does setting the margin on a div not affect the position of child content?
Posted
by DanM
on Stack Overflow
See other posts from Stack Overflow
or by DanM
Published on 2010-03-07T23:48:58Z
Indexed on
2010/03/07
23:53 UTC
Read the original article
Hit count: 166
I'd like to understand a little more clearly how css margins work with divs and child content.
If I try this...
<div style="clear: both; margin-top: 2em;">
<input type="submit" value="Save" />
</div>
...the Save button is right up against the User Role (margin fail):
If I change it to this...
<div style="clear: both;">
<input style="margin-top: 2em;" type="submit" value="Save" />
</div>
...there is a gap between the Save button and the User Role (margin win):
Questions:
Can someone explain what I'm observing? Why doesn't putting a margin on the div cause the input to move down? Why must I put the margin on the input itself? There must be some fundamental law of css I am not grasping.
© Stack Overflow or respective owner
