如何理解盒模型及其content、padding、border、margin？

这里是修真院前端小课堂，每篇分享文从

八个方面深度解析前端知识/技能，本篇分享的是：

【如何理解盒模型及其content、padding、border、margin？】

【修真院CSS小课堂】

如何理解盒模型及其content、padding、border、margin？

开场语：

大家好，我是IT修真院上海分院第10期的学员林璇，今天给大家分享一下，修真院CSS任务一

深度思考中的知识点——如何理解盒模型及其content、padding、border、margin？

（1）背景介绍：

盒子模型的简介

盒子模型的英文名字是叫做box model,而且HTML也是一个盒子

自然就包括了div a span 都可以成为盒子的，盒子模型是分为这几个的

1 content（中心）2 padding（内边距）3 border（边框）4 margin（外边距）

盒子模型分为IE盒子模型和标准盒子模型

关于这五个属性

width(宽度)：内容中心的一个宽度

height(高度)：内容中心的一个高度

padding（内边距）：在边框和内容的一个中间地方，可以直接用padding属性来控制

border（边框）：在内边距和外边距之间的一个边框

margin（外边距）：在最外面的叫做外边距，可以控制margin来创建一个距离外边的一个空白

（2）知识剖析&