设置了第一个外边距 。可对比下面代码中CSS .a1的样式 相对照
其他也可类似用控制器来查看边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>边距与布局</title>
<style>
#a{
width: 500px;
height: 500px;
background-color: grey;
margin: 20px auto;
/* 内边距 ,可单独设置,也可以设置 */
padding:30px 30px 50px 30px;
}
.aa{
width: 200px;
height: 200px;
background-color: honeydew;
border: 3px solid burlywood;
/* 作用:把之前独占一行的块元素取消独占一行的特性
具体详情参考链接:https://www.cnblogs.com/Ry-yuan/p/6848197.html */
display: inline-block;
}
.a1{
margin-left: 30px;
margin-right: 20px;
margin-top: 40px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="a">
<div class="aa a1">
</div>
<div class="aa a2">
</div>
</div>
<div id="b">
</div>
</body>
</html>