以前实习前端工作的时候，考官总讨厌问CSS盒子是什么？其实就是margin外边距和padding内边距，外加一个border边框，换了个奇妙的用法。

margin外边距

外边距的意思就是，元素向外的距离。

代码示例

margin:10px;

文字代表元素本身，黄色代表外边距。

padding内边距

内边距跟外边距恰好相反，元素向内的距离。

代码示例

padding:10px;

内边距也就是上面图片绿色地方，文字自身的宽高可以变大。

border边框

给元素添加边框，可以选边框样式、边框宽度、边框颜色值，很直观认知。

代码示例

border-width:5px;
border-style:solide;
border-color:red;

高手一般都就是缩写

border:5px solid red;