CSS padding margin border属性详解

W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域:内容(content)、内边距(padding)、边框(border)和外边距(margin)。对于初学者,经常会搞不清楚margin,background-color,background-image,padding,content,border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图,希望便于你的理解和记忆。
image
margin:层的边框以外留的空白

background-color:背景颜色

background-image:背景图片

padding:层的边框到层的内容之间的空白

border:边框

content:内容

image
参考博客
https://www.cnblogs.com/linjiqin/p/3556497.html