srcmini也许你会遇到过设置margin的时候没有效果的问题。不要心急，也是你还不了解margin，下面为你分析和了解margin的特别以便你能更好的使用它，避免下次再错。
情况一：垂直并列关系
<style>
.box1{
width: 100px;
height: 100px;
background-color:hotpink;
margin-bottom: 50px;
}
.box2{
width: 100px;
height: 100px;
background-color:indianred;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
连个方块，分别是box1,box2，设置box1的样式为margin-bottom: 50px;设置box2的样式为margin-top: 40px;
结果两个方块之间只有50px，你是不是会想为啥不是90px，因为外边距margin是想外推开，就好像人的手，要碰到东西才能推开，两个人一起伸出手去推对方的身体部分，那两者之间的距离当然是手比较长那一个的距离。
情况二：嵌套关系
<style>
.box1{
width: 200px;
height: 200px;
background-color:hotpink;
}
.box2{
width: 100px;
height: 100px;
background-color:indianred;
margin: 50px
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
为box2嵌套在box1里面，设置了margin=50px，只见父和子元素都向下移动了50px，而box2向左移动了50px。这种情况是因为父元素和子元素都叠在一起了。可以在父元素添加padding的方法解决。
.box1{
width: 200px;
height: 200px;
background-color:hotpink;
padding-top: 50px
}
.box2{
width: 100px;
height: 100px;
background-color:indianred;
}
评论前必须登录！
注册