这一小节，我们说一下margin外边距。怎么理解这个外边距呢，比如小张和小丽站在一起，紧紧排着站。试想一下，如果他俩冬天都穿着羽绒服和夏天穿着短袖，是不是占据的空间会不一样呢。那么回到HTML网页开发商来说，如果两个元素，他们加一些外边距，占的空间也会不一样，而且会使两个元素的距离也变的不一样。下面我们来看一下外边距的知识。
1 浏览器默认的外边距
上一节，我们新建了一个div标签，然后添加了名为 box 的css类。我们继续来看一下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个网页</title>
<link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>
<body>
<div class="box">我在学习前端开发</div>
</body>
</html>
.box {
width: 300px;
height: 300px;
border: 1px solid red;
}
由上图可知，我们添加的这个div元素呢，并没有贴边，与浏览器边界呢，保留有一定的边距。但我们现在看，浏览器的标签们，我们知道head标签的内容并不会显示在浏览器窗口呢。所以，就剩下了body 标签 和 div 标签。
那么这个边距是body产生的，还是这个div产生的呢？我们可以Chrome浏览器的调试工具看一下：
通过浏览器调试工具可以看出来，div标签本身并没有margin值。我们再通过浏览器调试工具看一下是不是body造成的。
通过调试工具可以看出：
这个浏览器默认的边距，是body标签产生的。而且呢，他的默认外边距是 8px 。
所以，我们可以给body设置一下css样式，将他的margin外边距值设置为0，就可以了。
body {
margin: 0;
}
.box {
width: 300px;
height: 300px;
border: 1px solid red;
}
2 两个块元素之间有默认外边距吗？
那么如果两个块元素，比如再添加一个 div 标签，我们之间会有默认的外边距吗？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个网页</title>
<link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>
<body>
<div class="box">我在学习前端开发</div>
<div class="box">2024巴黎奥运会</div>
</body>
</html>
通过上图可以看出，两个默认的div元素，并没有产生外边距，是紧紧贴在一起的。而且两个div元素中间的红色边框变粗了，证明他们是平铺下来的。
3 添加margin值
我们还可以通过设置，使第二个div元素与第一个div元素产生边距。这里就要涉及到一个组合写法，和单独写法。
组合写法记住一个顺序：（上 右 下 左）
比如我们希望第二个div元素，与上面的div元素产生50px的外边距，与左边产生30px的外边距，可以这样写：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个网页</title>
<link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>
<body>
<div class="box">我在学习前端开发</div>
<div class="box box1">2024巴黎奥运会</div>
</body>
</html>
body {
margin: 0;
}
.box {
width: 300px;
height: 300px;
border: 1px solid red;
}
.box1 {
margin-top: 50px;
margin-left: 30px;
}
当然，我们也可以采用组合式写法，因为一个元素有4个边距呢，写了margin-top margin-right margin-bottom margin-left 很多时候，我们得写很多个这样的css设置，不如组合写法高效。就像这样：
body {
margin: 0;
}
.box {
width: 300px;
height: 300px;
border: 1px solid red;
}
.box1 {
/* margin-top: 50px;
margin-left: 30px; */
margin: 50px 0 0 30px;
}
通过上面代码，我们发现css里的注释，和html不一样，css的注释就是采用
/* 代码片段 */
的方式。而组合写法呢，记住这个顺序，上 右 下 左，一定要记住。
4 加深练习
我们还可以在第一个div元素呢，添加一个div元素，看一下子块元素的外边距设置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个网页</title>
<link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>
<body>
<div class="box">
我在学习前端开发
<div class="box-inner">我正在学习CSS入门课程</div>
</div>
<div class="box box1">2024巴黎奥运会</div>
</body>
</html>
body {
margin: 0;
}
.box {
width: 300px;
height: 300px;
border: 1px solid red;
}
.box1 {
/* margin-top: 50px;
margin-left: 30px; */
margin: 50px 0 0 30px;
}
.box-inner {
border: 1px solid blue;
margin: 20px 0 0 20px;
}
通过上面代码，我们可以出，子块元素的margin外边距生效了，而且子块元素的的默认宽度是跟着父元素走的，如果子元素不设置宽度，那么宽度就是父元素的宽度。
但是我们看这个子块元素跟右边贴住了，不好看，对吧。我们上面都没有设置过右侧的边距，我们来试一下。
body {
margin: 0;
}
.box {
width: 300px;
height: 300px;
border: 1px solid red;
}
.box1 {
/* margin-top: 50px;
margin-left: 30px; */
margin: 50px 0 0 30px;
}
.box-inner {
border: 1px solid blue;
margin: 20px 20px 0 20px;
}
通过上面代码可知，虽然默认子元素的宽度是跟着父元素走的，但可以通过margin设置外边距，改变元素的宽度显示。
5 行内元素的外边距
5.1 两个span行内元素显示的情况
我们上面说的都是div块元素的外边距，那么行内元素，例如 span 标签的外边距，会有何不同呢？我们在第二个div元素呢，加一个span标签试试。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个网页</title>
<link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>
<body>
<div class="box">
我在学习前端开发
<div class="box-inner">我正在学习CSS入门课程</div>
</div>
<div class="box box1">
2024巴黎奥运会
<span class="box1-inner">侯志慧又夺冠啦！</span>
</div>
</body>
</html>
body {
margin: 0;
}
.box {
width: 300px;
height: 300px;
border: 1px solid red;
}
.box1 {
/* margin-top: 50px;
margin-left: 30px; */
margin: 50px 0 0 30px;
}
.box-inner {
border: 1px solid blue;
margin: 20px 20px 0 20px;
}
.box1-inner {
border: 1px solid green;
}
通过上面代码，我们可以得知，不过做HTML练习的时候已经知道了，这里复习一下吧。我们新添加的span这个行内元素，并没有产生换行效果，而是又继续横排起来了。
但是呢，新添加的span标签，和父元素这个div的上横线重叠了。
那么我们再添加一个span行内元素呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个网页</title>
<link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>
<body>
<div class="box">
我在学习前端开发
<div class="box-inner">我正在学习CSS入门课程</div>
</div>
<div class="box box1">
2024巴黎奥运会
<span class="box1-inner">侯志慧又夺冠啦！</span>
<span class="box1-inner">侯志慧太棒了！</span>
</div>
</body>
</html>
通过以上代码发现，第二个span元素，因为放不下而换行了。
注意：右侧的空隙并不是外边距造成的，而是内容放不下了，被挤下去了，默认是左对齐的，所以你看，距离左边没有空隙，但是右边有。后边我们说默认右对齐的情况。
5.2 给span设置外边距
下面，我们给第一个span元素设置外边距，看看效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个网页</title>
<link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>
<body>
<div class="box">
我在学习前端开发
<div class="box-inner">我正在学习CSS入门课程</div>
</div>
<div class="box box1">
2024巴黎奥运会
<span class="box1-inner box1-inner1">侯志慧又夺冠啦！</span>
<span class="box1-inner">侯志慧太棒了！</span>
</div>
</body>
</html>
body {
margin: 0;
}
.box {
width: 300px;
height: 300px;
border: 1px solid red;
}
.box1 {
/* margin-top: 50px;
margin-left: 30px; */
margin: 50px 0 0 30px;
}
.box-inner {
border: 1px solid blue;
margin: 20px 20px 0 20px;
}
.box1-inner {
border: 1px solid green;
}
.box1-inner1 {
margin: 20px;
}
通过上面代码，可以发现，我们给span标签设置外边距，这里采用了一个组合式写法，但这个组合式写法更加的省事，只写了一个 margin: 20px; 这样的。这样的写法就是说：上 右 下 左，我不分别设置了，都是20px 。
但是看效果图，只有左和右生效了，上下并没有生效。（这就是行内元素与块元素在margin外边距设置上的不同。）
6 最后
我们这一节，从margin外边距开始说了css，其实这里面又不光有 margin 外边距的知识点，其实越到后来，越很难单独说清楚某一个知识点，知识点呢，都是有关联的。所以大家需要认真去记住一些东西，认真练习一些代码。
我在文章里会总结一些，你在练习的过程中，也要形成自己的一些总结，这样才能更加扎实的学习下去。好了，这一节就到这里啦。
**喜欢这个专栏的小伙伴，记得点个“订阅”:**WEB前端小白从这里出发_经海路大白狗的博客-CSDN博客
反正也不花钱，一起开心的学习前端开发。
版权归原作者 经海路大白狗 所有， 如有侵权，请联系我们删除。