css盒模型中有四种元素，分别是内间距、外间距、内容还有边框。这四种定义了盒模型的使用，今天我们就来说说关于css盒模型的外间距的使用吧
css的外间距如何设置？
我们的外间距是属于css盒模型之中的一种，那么现在我们来看看外间距都是怎么设置的吧。
margin： 是一个简写属性，可以一个声明中设置所有外边距属性。
来看个完整外边距的实例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
.diyi{border:solid #D91C1F thin; width: 400px;}
p{border: double;}
</style>
</head>
<body>
<div class="diyi">
<p>这是一个p标签，是用来使用外边距的</p>
</div>
</body>
</html>这是一个简单的HTML代码的实例，加了点边框在里面，所以我们看到的效果如图：
这就是刚才那串代码的效果。
我们现在来看看使用外边距的效果：
<style type="text/css">
.diyi{border:solid #D91C1F thin; width: 400px;}
p{border: double; margin-top: auto}
</style>上面这是用css样式来把p标签上面和div标签中间的距离给取消了，现在看图：
效果是不是和上面说的一样。
现在我们看看如果把p标签的四个外边距都取消了之后会有什么效果，我们来看看：
<style type="text/css">
.diyi{border:solid #D91C1F thin; width: 400px;}
p{border: double; margin: auto}
</style>代码是不是感觉和上面一样，但是也很明显这是把里面的向上的元素给取消了，所以现在变成了四面外边距都是零了，我们来看看效果吧：
是不是很明显，所有的外边距都没有了。
但是如果我们想设置外边距的时候该怎么办呢？
也很简单，再来看看实例吧：
<style type="text/css">
.diyi{border:solid #D91C1F thin; width: 400px;}
p{border: double; margin:20px}
</style>这是把所有的外边距都设置成了二十，看的出来吧，那么就来看看效果图吧：
大家可以很清楚的看到，四周的边框都是为20px。
还可以为单方向设置外边距，比如我们可以看下面这个例子：
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
.diyi{border:solid #D91C1F thin; width: 400px;}
p{border: double; margin-right:20px}
h1{border:double; margin-bottom: 50px}
</style>
</head>
<body>
<div class="diyi">
<h1>这里是PHP中文网</h1>
sdfahsdkjfhksjdhf
<p>这是一个p标签，是用来使用外边距的</p>
</div>
</body>这个实例是把h1标签加了下方的外边距，边距距离为50px，p标签加了右边的外边距，边距距离为20px。我们来看看效果图：
是不是很明显，这就是外边距的用法，还可以在一个属性中设置几个外边距。大家都可以上手试试的，都不是很难。
好了，以上就是本篇文章的全部内容了，想看更多就来PHP中文网css学习手册栏目学习。有问题的可以在下方提问。
【小编推荐】
css盒模型的边框用法你知道吗？这里有css盒模型的组成介绍
以上是css的外间距如何设置？css外间距的设置方法（附实例）的详细内容。更多信息请关注PHP中文网其他相关文章！
通过Astro Action和Fuse.js为搜索提供动力Apr 22, 2025 am 11:41 AM对于Astro，我们可以在构建过程中生成大部分网站，但是有一小部分服务器端代码可以使用Fuse.js之类的搜索功能来处理搜索功能。在此演示中，我们将使用保险丝搜索一组个人“书签”
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
安全考试浏览器
Safe Exam Browser是一个安全的浏览器环境，用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问，并防止学生使用未经授权的资源。
Atom编辑器mac版下载
最流行的的开源编辑器
EditPlus 中文破解版
体积小，语法高亮，不支持代码提示功能
SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。
