tinguo002

 

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 一堣而安 阅读(2639) 评论(0)  编辑  收藏 所属分类: js_css


只有注册用户登录后才能发表评论。


网站导航:
 

导航

统计

常用链接

留言簿(1)

随笔分类

随笔档案

收藏夹

搜索

最新评论

阅读排行榜

评论排行榜