html - The margin of a div respect its parent -
i confused margins. have logo inside div content. if give margin-top div logo margin appears between content , page. why?
here example: http://jsfiddle.net/bckpb/
css:
#content { position:relative; margin:0 auto; width:300px; height:250px; background-color:blue; } #logo { margin:20px auto; /* why 20px appear between page , content? */ width:120px; height:120px; background:yellow; }
html:
<div id="content"> <div id="logo"> </div> </div>
it's because top-margin of block-level element , top-margin of first block-level child collapse (unless border, padding, line boxes or clearance separate them). 1 way prevent behaviour add overflow
value other visible #content
div. can change display value of #content
inline-block.
Comments
Post a Comment