如图为CSDN播客撰写页面的盒子模型：
右键-检查-Computed中查看该模型图
盒子边框：border
如图：
代码：
属性：
border-width：边框的粗细，单位是px。
border-style：边框的样式
样式属性：none：无（默认值）
solid：单实线
dashed： 虚线
dotted：点线
border-color： 边框的颜色
综合写法：border：边框的粗细 边框的样式 边框的颜色；
也可以给边框的一个边或某几个边定义样式
方法是需要加上方位词（top，left，bottom，right），比如上边框（其他同理）：
border-top-style；
border-top-width；
border-top-color；
border-top：宽度 样式 颜色；
内边距：padding
指边框与内容之间的距离。
运行效果：
padding也有方位词属性：
padding-top：上内边距；
padding-left：左内边距；
padding-right：右内边距；
padding-bottom：下内边距；
当padding跟具体数值时，不同个数的值代表意义不一样；
复合写法：
(注意书写顺序)
一个值： padding：10px；
表示上下左右内边距为10px。
两个值：padding：5px 10px；
表示上下内边距为5px，左右内边距为10px。
三个值：padding：5px 10px 15px；
表示上内边距为5px，左右内边距为10px，下内边距为15px。
四和值：padding：5px 10px 15px 20px；
表示上内边距为5px，右内边距为10px，下内边距为15px，左内边距为20px。
盒子尺寸计算:
内边距会撑大盒子所以
盒子的宽度=设定的宽度+padding左右值+边框左右值；
盒子的高度=设定的高度+padding上下值+边框上下值；
如果盒子不设置宽度则paddin左右值不会撑开盒子。
外边距：margin
指盒子与盒子之间的距离。
可以和padding对比记忆：
都是四个方位词
margin-top:上外边距
margin-left:左外边距
margin-right:右外边距
margin-bottom:下外边距
margin的复合写法和padding相同。
给左边的盒子设置margin-right：50px；
运行结果：
让一个有高度有宽度的盒子水平居中：margin：0 auto；或者margin：auto；