css排版時出現:里面的div設置margin-top值時外面div會向下移動相應距離這是為什么
來源:http://zhidao.baidu.com/question/263160712.html
css排版時出現:里面的div設置margin-top值時外面div會向下移動相應距離這是為什么 請哪位高手幫幫忙
<body> <div class="logon"> <div class="log_bk"> </div> </div> </body> body { margin:0 auto; padding:0px; background:#0A76B0;} #logon{ background:url(../images/logon-bk.jpg) no-repeat left top; height:865px; width:1251px;} .log_bk{ background:url(../images/01.png) no-repeat left top; height:380px; height:270px; margin:300px 0 180px 460px;} 因為背景是圖案所以要設置高度,我把#logon的背景定位在頂部也不行。
滿意回答設置logon的padding: 1px 因為logon和log_bk垂直方向的margin合并了,如果設置了logon的padding為1px就可以避免margin合并。追問
好了,剛才把padding值加到里面的div了,不過兩個div的margin值為什么會合并呢?回答
恩,剛才我寫錯了,寫成里面的了。。 這個是css標準規定的,垂直方向的margin會合并。 比如你有很多段落,margin是10px,其實第一段上面的margin和最后一段下面的margin是10px,且段與段之間的margin也是10px,css標準就是為了保持這個margin一致才規定垂直方向margin要合并。 margin合并時會取最大的那個margin,所以合并后logon的margin-top也成了300px了。
|
|
歡迎大家訪問我的個人網站 萌萌的IT人
posted on 2012-07-05 16:52 一堣而安 閱讀(2650) 評論(0) 編輯 收藏 所屬分類: js_css