CSS 框模型 element、width、height、border、padding、margin区别

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

element : 元素。
padding : 内边距，也有资料将其翻译为填充。
border : 边框。
margin : 外边距，也有资料将其翻译为空白或空白边。

padding分别设置上、右、下、左内边距：
| padding | 简写属性。作用是在一个声明中设置元素的所内边距属性。
| padding-bottom | 设置元素的下内边距。
| padding-left | 设置元素的左内边距。
| padding-right | 设置元素的右内边距。
| padding-top | 设置元素的上内边距。
margin分别设置上、右、下、左外边距：
margin-top
margin-right
margin-bottom
margin-left

CSS border 围绕元素内容和内边据的一条或多条，属性允许你规定元素边框的样式、宽度和颜色。
border-top-style
border-right-style
border-bottom-style
border-left-style

border-top-width
border-right-width
border-bottom-width
border-left-width

border-top-color
border-right-color
border-bottom-color
border-left-color

width、height、padding、margin、border区别

width、height、padding、margin、border区别

作者：Left左
链接：https://www.jianshu.com/p/28bebacfc761