《编程基础：HTML第七章》 ：盒子模型之内外边距
作者|李娜
*本文为「Java联盟」原创内容，转载无需授权，请保留署名来源。
温馨提示：细读本文需要2分钟，速读仅需1分钟。
吼吼吼李娜 又来给大家普及知识了！掌声鲜花在哪里！！
内边距
盒子模型之
上一章我们讲到 《盒子模型之 border》，那么下面要讲的内容是在（蓝色区域）和边框（border）之间存在的绿色部分——内边距padding
内边距就是内容到边框的距离。padding 属性接受长度值或百分比值（这里的百分比值是相对于父级的元素），但不允许使用负值。
源代码示意图：
执行效果图：
这是一个普通的div标签，现在我们为它添加内边距padding-top:50px;
效果图：
（为了让小伙伴们看的清楚，特意写了一个对比部分）
通过图片我们可以看出以下两点：
1.内边距呈现了内容部分的背景颜色
2.在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距不会影响内容区域的尺寸，但是会增加整体元素框的大小。
所以如果我们想要在修改内容在标签中的位置的同时又不改变整体元素框的大小时就要对我们的内容部分进行修改了。
下面介绍一下内边距的具体设置：
padding-top:20px / 10%;/*顶部内边距*/
padding-right:20px / 10%;/*右边内边距*/
padding-bottom:20px / 10%;/*下面内边距*/
padding-left:20px / 10%;/*左边内边距*/
这是单一设置四个边的内边距的方式，我们也可以综合来写。
假设我们希望所有的h1标签的各个边都有10像素的内边距：
h1{padding:10px;}
像这样子写就是代表上下内边距为10px，左右内边距为20px。
h1{padding:10px 20px;}
这样子设置就是代表上内边距为10px，左右内边距为20px，下内边距为30px。
h1{padding:10px 20px 30px;}
当我们设置4个值时，按顺时针方向来数即：上内边距10px，右内边距20px，下内边距30px，左内边距40px。
h1{padding:10px 20px 30px 40px;}
有时候我们的内容模块很小，那么在设置内边距时优先满足上内边距与做内边距。
代码演示如下：
效果图：
让我们打开浏览器的检查功能看一下我们设置的padding的效果：
我们实际设置的padding效果如上图的紫色部分，但是因为我们的p标签内容大少无法满足这么大的区域，只有优先满足上内边距与左内边距了。
而且我们设置div标签的大小时200px*200px，现在我们看见整个div的标签大小为260（200+20+40）*240（200+10+30）。
外边距
盒子模型之
围绕在元素边框的空白区域是外边距。
设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
闲话少说上干货：
h1 {margin : 0.25in;}
这句代码的意思就是：在 h1 元素的各个边上设置了 1/4 英寸宽的空白
当我们提供数值不足四个时候，请看下面的图片。（内边距也是同样的道理）
我想这个图应该是很直观了。
当然我们也可以分开来为每个边赋值：
h1 {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 15px;
margin-left: 5px;
}
和：
h1{margin：10px 0px 15px 5px；}的效果是一样的。
光有知识是不够的，还应当去运用。
所以小伙伴们也自己尝试着做些什么东西吧！
学习如果不是为了装逼，那么将毫无意义！！！
当然有什么问题或者需要李娜我给大家分享讲解的地方，可以在留言区留言告诉我，整理后会在公众号里面分享讲解哦！
