CSS核心（二十八）外边距 margin精讲 并解决margin-top影响父盒子的问题
margin和padding的使用方法完全相同，但margin是给一个元素添加外边距。如果想要让子盒子和父盒子之间产生边距，通过边距设置的话，有两种方法：
1、给父盒子添加内边距。
2、给子盒子添加外边距。
margin有三个重要知识点
1、使用margin-auto:0 auto;可以让指定的行内块元素横向居中。
2、使用margin的四个属性值。
3、margin不会扩大盒子本身的尺寸，但会增加盒子的占位尺寸。
下面我们先看到代码（margin-auto:0 auto）：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>外边距 margin精讲 并解决margin-top影响父盒子的问题</title>
</head>
<style>
.wai{
width: 400px;
height: 400px;
background-color: aquamarine;
}
.nei{
width:200px;
height:200px;
background:#f00;
margin:0 auto;/* 让盒子横向居中 */
/* margin-left:50px; */
/* margin-top:50px; */
/* margin-right:50px; */
/* margin-bottom:50px; */
/*margin:10px 20px 30px 40px;*/
}
</style>
<body>
<div class="wai">
<div class="nei"></div>
</div>
</body>
</html>
以上代码实现了子盒子的横向居中。
下面再看外边距的设置方法，它与内边距padding的设置方法完全一样
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>外边距 margin精讲 并解决margin-top影响父盒子的问题</title>
</head>
<style>
.wai{
width: 400px;
height: 400px;
background-color: aquamarine;
}
.nei{
width:200px;
height:200px;
background:#f00;
/* margin:0 auto;/* 让盒子横向居中 */
/* margin-left:50px; */
/* margin-top:50px; */
/* margin-right:50px; */
/* margin-bottom:50px; */
margin:20px 20px 30px 40px;/* 顺序为:上右下左 */
}
</style>
<body>
<div class="wai">
<div class="nei"></div>
</div>
</body>
</html>
需要注意的是：我们给子盒子的上外边距设置了20像素，可是发现子盒子和父盒子顶边的距离并未发生变化，而是父盒子的顶边产生了20像素的外边距。
这其实是CSS中的一个BUG：
该BUG的症状是：当两个div嵌套时，如果给子盒子设置margin-top属性时，如果父盒子的margin-top的值大，那就父盒子的margin-top生效，否则是子盒子的margin-top生效，而且margin-top设定始终相对于父盒子的上一个元素。
以上代码中，由于父盒子没有设置margin-top，所以父盒子的外边距为0，而子盒子的外边距为20px，所以结果父盒子的外边距为20px，如果不能理解也没关系，反正这是一个bug。
那么如何解决margin-top影响父盒子的问题呢？
请看下面的代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>外边距 margin精讲 并解决margin-top影响父盒子的问题</title>
</head>
<style>
.wai{
width: 400px;
height: 400px;
background-color: aquamarine;
overflow: hidden
}
.nei{
width:200px;
height:200px;
background:#f00;
/* margin:0 auto;/* 让盒子横向居中 */
/* margin-left:50px; */
/* margin-top:50px; */
/* margin-right:50px; */
/* margin-bottom:50px; */
margin:20px 20px 30px 40px;/* 顺序为:上右下左 */
}
</style>
<body>
<div class="wai">
<div class="nei"></div>
</div>
</body>
</html>
上面的代码中，我们给父盒子添加了一个overflow:hidden;属性，发现margin-top正常了，至于这是个什么原理，说起来比较抽象，暂时不说了，大家只要记住margin-top要和overflow: hidden;配合使用即可。
还可以通过给父盒子设置padding-top的方式解决，但设置padding-top后，父盒子的宽度要减去padding-top的尺寸，否则盒子会变大。
在后面的课程中还会有更多的解决办法。
^精华啊，虚心学习 ^很受启发!谢谢您的佳文! 对初学者来说指明了方向和方法！不错！！！ 只要是发现了自己的问题 那就是好样的 ai~~受不了。。一个怕麻烦的人。。唉。。。 我作为初学者，更是应该先把基础打牢固 电脑是用来费电的不是叫人用的 ^中国的程序员要努力呀！楼主的话很是受用中国的程序员要努力呀！我想应该更多的人把他们的经写出来，这样好让咋们中国人少走一些弯路希望我们共同奋斗，为了自己的理想，拼了！呵呵 站在那里不重要，重要的是走向那里