2 zaxlctjs zaxlctjs 于 2015.07.26 11:01 提问

div+css布局的一个很小问题,求解,谢谢了
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0; padding:0;}
.A{width:950px; height:40px; background:#ccc;}
.nav{width:800px; height:20px; background:blue; margin-top:5px;}
</style>
</head>

<body>
<div class="A">
   <div class="nav"></div>
</div>
</body>
</html>


在我的想象中, 打开浏览器应该是这样的
图片说明

然而,实际上,打开浏览器却是这样的
图片说明

为什么会这样,
margin-top为什么不基于他外面的大盒子,而是基于外面显示?

9个回答

vuturn
vuturn   2015.07.26 11:48
已采纳

父div没有padding或者border,垂直外边距会发生合并。

CSDNXIAOD
CSDNXIAOD   2015.07.26 11:12

DIV+CSS布局的一个小问题的解决
div+Css三列布局中的一个小问题
DIV+CSS布局
----------------------biu~biu~biu~~~在下问答机器人小D,这是我依靠自己的聪明才智给出的答案,如果不正确,你来咬我啊!

strutce
strutce   Ds   Rxr 2015.07.26 11:09

<!doctype html>



无标题文档 *{margin:0; padding:0;position:absolute; z-index:1;} .A{width:950px; height:40px; background:#ccc;} .nav{width:800px; height:20px; background:blue; margin-top:10px;}


strutce
strutce 把css样式改成这样就可以了,
2 年多之前 回复
vuturn
vuturn   2015.07.26 11:49

你在父div加上padding或者border就不会了,自己百度下垂直外边距合并,就明白了

zhangyang5023637
zhangyang5023637   2015.07.26 12:03

<!doctype html>



无标题文档 *{margin:0; padding:0;} .A{width:950px; height:40px; background:#ccc; float:left} .nav{width:800px; height:20px; background:blue; margin-top:5px;float:left}


你的样式属性里面少了 这个 float:left

zhangyang5023637
zhangyang5023637   2015.07.26 12:04

<!doctype html>



无标题文档 *{margin:0; padding:0;} .A{width:950px; height:40px; background:#ccc;} .nav{width:800px; height:20px; background:blue; margin-top:5px;}


你的样式属性里面少了这个 float:left

showbo
showbo   Ds   Rxr 2015.07.26 13:28
danielinbiti
danielinbiti   Ds   Rxr 2015.07.26 11:17
 .A{width:950px; height:40px; background:#ccc;}
 这个样式改改,在chrome或者ff下需要增加overflow:hidden或者overflow:auto; 
.A{width:950px; height:40px; background:#ccc;overflow:hidden}

或者用父容器的padding-bottom来控制。
cuiwei1026522829
cuiwei1026522829   Ds   Rxr 2015.07.26 17:09
Csdn user default icon
上传中...
上传图片
插入图片