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的尺寸，否则盒子会变大。
在后面的课程中还会有更多的解决办法。
|
窥视卡
雷达卡
发表于 2023-2-1 09:42:44
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-17 18:13:24
