css3的两种边距属性：1、内边距属性（padding、padding-top等），可设置元素边框与元素内容之间的空间；2、外边距属性（margin、margin-top等），可设置元素周围的空间。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
css3的边距分为两种：
内边距（padding）：元素边框与元素内容之间的空间
外边距（margin）：元素周围的空间
内边距属性
| 属性 | 说明 |
|---|---|
| padding | 使用简写属性设置在一个声明中的所有填充属性 |
| padding-bottom | 设置元素的底部填充 |
| padding-left | 设置元素的左部填充 |
| padding-right | 设置元素的右部填充 |
| padding-top | 设置元素的顶部填充 |
示例：
html>
<meta>
<style>
p
{
background-color:yellow;
}
p.padding
{
padding:25px 50px;
}
</style><p>这是一个没有指定内边距的段落。</p>
<p>这是一个指定内边距的段落。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/js/8069" title="HTML5炫酷粒子动画导航菜单特效"><img
src="https://img.php.cn/upload/jscode/000/000/001/170921340379826.jpg" alt="HTML5炫酷粒子动画导航菜单特效" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/js/8069" title="HTML5炫酷粒子动画导航菜单特效" class="overflowclass">HTML5炫酷粒子动画导航菜单特效</a>
<p class="overflowclass">HTML5炫酷粒子动画导航菜单特效是一款导航菜单采用鼠标悬停变色的特效。</p>
</div>
<a rel="nofollow" href="/xiazai/js/8069" title="HTML5炫酷粒子动画导航菜单特效" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
外边距属性
| 属性 | 描述 |
|---|---|
| margin | 简写属性。在一个声明中设置所有外边距属性。 |
| margin-bottom | 设置元素的下外边距。 |
| margin-left | 设置元素的左外边距。 |
| margin-right | 设置元素的右外边距。 |
| margin-top | 设置元素的上外边距。 |
示例：
html>
<meta>
<style>
p
{
background-color:yellow;
}
p.margin
{
margin:100px 50px;
}
</style><p>这是一个没有指定外边距大小的段落。</p>
<p>这是一个指定外边距大小的段落。</p>
（学习视频分享：css视频教程）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
