内边距与外边距

内边距
边框和内容之间的距离就是内边距

格式
非连写
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;

连写
padding: 上 右 下 左;

这三个属性的取值省略时的规律
上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
上 右 下 左 > 上 > 右下左边取值和上边一样

注意点:
1.给标签设置内边距之后, 标签占有的宽度和高度会发生变化
2.给标签设置内边距之后, 内边距也会有背景颜色

---

外边距
标签和标签之间的距离就是外边距

格式
非连写
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
连写
margin: 上 右 下 左;

这三个属性的取值省略时的规律
上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
上 右 下 左 > 上 > 右下左边取值和上边一样

注意点:
外边距的那一部分是没有背景颜色的
如果子元素设置margin 父元素没设置边框，那么父元素会跟着子元素一起被顶下来
margin 是相对兄弟元素进行分隔

在默认布局的垂直方向上, 默认情况下外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的