CSS padding margin border属性讲解

把所有网页上的对象都放在一个盒（box）中，设计师可以通过创建定义来控制这个盒的属性，这些对象包括段落、列表、标题、图片以及层。
盒模型主要定义四个区域：
内容（content）
内边距（padding）
边框（border）
外边框（margin）

在这里插入图片描述
margin层的边框以外留的空白
background-color背景颜色
background-image背景图片
padding层的边框到层的内容之间的空白
border边框
content内容

在这里插入图片描述

margin和padding的属性
margin:
在这里插入图片描述

包括margin-top,margin-right,margin-bottom,margin-left
控制块级元素之间的距离他们是透明不可见的
根据上右下左的顺时针规则，可以写为
margin: 40px 40px 40px 40px;

当上下，左右margin值分别一致的时候，可简写为
margin: 40px 40px;

当上下左右margin值都一致的时候，可写为
margin: 40px;

padding
包括padding-top,padding-right,padding-bottom,padding-left
控制块级元素内部 content与border之间的距离

详细说明：
如果只提供一个，将用于全部的四条边
如果只提供两个，第一个用于上下，第二个用于左右
如果提供三个，第一个用于上，第二个用于左右，第三个用于下
如果提供四个，第一个用于上，第二个用于右，第三个用于下，第四个用于左
padding: 36px; //对象四边的补丁边距均为36px
padding: 36px 24px; //上下两边的补丁边距为36px，左右两边的补丁边距为24px
padding: 36px 24px 18px; //上、下两边的补丁边距分别为36px、18px，左右两边的补丁边距为24px
padding: 36px 24px 18px 12px; //上、右、下、左补丁边距分别为36px、24px、18px、12px

在这里插入图片描述