Why does setting the margin on a div not affect the position of child content?
- by DanM
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.
