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.

http://jsfiddle.net/bckpb/3/


Comments

Popular posts from this blog

curl - PHP fsockopen help required -

HTTP/1.0 407 Proxy Authentication Required PHP -

c# - Resource not found error -