网页右键检查，查看盒子模型
margin—外边距
如下图的盒模型所示的位置，margin是盒模型最外面一层的空间区域，可自定义设置上下左右大小，一般看不见，但确实存在，用于排布元素与其他元素的间隔距离。
border—边框
如下图的盒模型所示的位置，border是可以用设置{border: 1px solid red}样式看到的，也是盒模型的组成中唯一可以明显看到大小的一项，是视觉上可以看到的元素的大小。
padding—内边距
如下图的盒模型所示的位置，内边距padding和外边距一样也是看不到但真实存在的元素中的空间组成部分，用于设置元素的边界和内容content之间的距离。
content—内容
如下图的盒模型所示的位置，padding里面的部分是内容content，是元素里面的文字或者其他元素内容。其大小也是视觉上看不到的，若padding值为0时，内容大小是border内线围成的大小