margin-top在什么情况下会影响父div
今天练习制作各式各样的菜单，但是想着既然全部都是菜单，为何要建那么多文档，放在一个页面中的不同div中多好，于是就写了如下代码：
<!DOCTYPE html />
<html>
<head>
<title>纵向菜单</title>
<style type="text/css">
*{
margin:0;padding:0;}
#listmenu{
width:100%;height:400px;background:#ff99ff;}
nav{
width:150px;margin-top:50px;background:#99ff00;}
#nav_left ul{
list-style-type:none;border:1px solid #cc00ff;border-radius:3px;padding:5px 10px 3px;}
#nav_left li{
font-family:楷体;font-size:20px;padding:3px 5px;}
#nav_left li+li{
border-top:1px solid #9900ff;}
#nav_left a{
color:#660099;display:block;text-align:center;text-decoration:none;background-color:#ffccff;}
#nav_left a:hover{
color:#006600;}
#nav_left a:active{
color:#ff0000;background-color:#99ff66;}
#nav_left a:visited{
color:#ffff33;}
</style>
</head>
<body>
<div id="listmenu">
<nav id="nav_left">
<ul>
<li><a href="#">个人信息</a></li>
<li><a href="#">教育经历</a></li>
<li><a href="#">家庭成员</a></li>
</ul>
</nav>
</div>
</body>
</html>
运行结果如图所示： 为了达到网页练习目的改正后代码如下：
<!DOCTYPE html />
<html>
<head>
<title>纵向菜单</title>
<style type="text/css">
*{
margin:0;padding:0;}
#listmenu{
width:100%;height:400px;background:#ff99ff;}
nav{
width:150px;margin-top:50px;background:#99ff00;}
#nav_left ul{
list-style-type:none;border:1px solid #cc00ff;border-radius:3px;padding:5px 10px 3px;}
#nav_left li{
font-family:楷体;font-size:20px;padding:3px 5px;}
#nav_left li+li{
border-top:1px solid #9900ff;}
#nav_left a{
color:#660099;display:block;text-align:center;text-decoration:none;background-color:#ffccff;}
#nav_left a:hover{
color:#006600;}
#nav_left a:active{
color:#ff0000;background-color:#99ff66;}
#nav_left a:visited{
color:#ffff33;}
</style>
</head>
<body>
<div id="listmenu">addtest
<nav id="nav_left">
<ul>
<li><a href="#">个人信息</a></li>
<li><a href="#">教育经历</a></li>
<li><a href="#">家庭成员</a></li>
</ul>
</nav>
</div>
</body>
</html>
改编后运行结果如图： 为了明显看到变化，我在div后面没有直接加 ；而是加了add。接下来就说说影响父div的原因：原来是因为毗邻的元素会共享margin-top，也许有人要说这个例子div和nav的关系是嵌套，怎么会是毗邻，毗邻的定义为：处在同级或者嵌套位置的盒元素，并且它们之间内容为空、Padding或Border分隔，那么它们就是毗邻关系，所以会共享margin-top。