1.背景介绍 

盒模型是什么？ 

对一个网页来说，基本上页面上所有的元素对象，其实际的呈现形式都是一个盒子形状的抽象; 

所谓的盒子其实就一个长方形（或者正方形）的抽象。从外到内，他由4层东西组成，分别是margin（间距) ，border（边框），padding（填充），content（内容）。他们的结构特征是一层包裹着一层。

2.知识剖析 

（1)content 

盒模型的内容显示在content里，width 和 height 设置内容框（content box）的宽度和高度。内容框是框内容显示的区域——包括框内的文本内容，以及表示嵌套子元素的其它框； 

还有其他属性可以更巧妙地处理内容的大小——设置大小约束而不是绝对的大小。这些属性包括min-width、max-width、min-height 和 max-height。 

（2）padding 

padding 表示一个 CSS 框的内边距 ——这一层位于内容框的外边缘与边界的内边缘之间。用于控制content 与 border之间的距， 该层的大小可以通过简写属性padding 一次设置所有四个边，或用 padding-top、padding-right、padding-bottom 和 padding-left 属性一次设置一个边。 

{padding: 10px 20px 10px 20px;} 上、右、下、左 

{padding: 10px 20px;}上、下、左、右 

{padding: 10px 20px 30px;}等价于 10px 20px 30px 20px 

(3)border 

CSS 框的边界（border）是一个分隔层，位于内边距的外边缘以及外边距的内边缘之间,边界的默认大小为0——从而让它不可见——不过我们可以设置边界的厚度、风格和颜色让它出现。 border 简写属性可以让我们一次设置所有四个边，例如 border: 1px solid black; 但这个简写可以被各种普通书写的更详细的属性所覆盖： 

border-top, border-right, border-bottom, border-left: 分别设置某一边的边界样式。border的属性主要有三个color(颜色) width(粗细) style(样式)，color的设置和文字的设置一样是设置颜色，width即为border的粗细，style属性可以设置为none、hidden、dotted、dashed、solid等,你也可以单独设置某一个边的三个不同属性，如 border-top-width, border-top-style, border-top-color，等 

(4)margin 

外边距（margin）代表 CSS 框周围的外部区域，称为外边距，它在布局中推开其它 CSS 框。指元素与元素之间的距离，从直观上来看就是指用于控制块与块之间的距离。其表现与 padding 很相似；简写属性为 margin，单个属性分别为

3.常见问题 

外边距重叠 

什么时候会重叠？ 

两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠,说明其数量必须是大于一个，又说明，折叠是元素与元素间相互的行为，不存在 A 和 B 折叠，B 没有和 A 折叠的现象。是指具体的方位，只有垂直方向的 margin 才会折叠，也就是说，水平方向的 margin 不会发生折叠的现象。 

俩者中取较大的值作为两个块级之间的距离

4.解决方案 

浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠（注意这里指的是上下相邻的元素） 

创建了块级格式化上下文的元素，不和它的子元素发生 margin 折叠（注意这里指的是创建了BFC的元素和它的子元素不会发生折叠） 

我们都知道触发BFC的因素是float（除了none）、overflow（除了visible）、display（table-cell/table-caption/inline-block）、position（除了static/relative）

5.扩展思考 

标准盒模型和ie盒模型的区别 

6.参考文献 

参考资料：https://blog.csdn.net/sinat_34719507/article/details/53585712 

—— 内容(content)、填充(padding)、边框(border)、边界(margin)：CSS中盒子模型有何区别 

参考资料：https://blog.csdn.net/xu838209490/article/details/74468916 

——盒子模型的理解 

7.更多讨论 

（1）垂直方向外边距重叠，最简单有效的去除方法是什么？ 

答：最简单的就是上面盒子只设置下外边距或者下面盒子只设置上外边距 ，这样就只有一个外边距字然不会重叠

（2）标准盒模型和ie盒模型的区别 ？ 

答：标准模型中，盒模型的宽高只是内容（content）的宽高 

而在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。 

（3）什么时候用padding什么时候用margin 

答：margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。

何时应当使用margin： 

需要在border外侧添加空白时。 

空白处不需要背景（色）时。 

上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。

何时应当时用padding： 

需要在border内测添加空白时。 

空白处需要背景（色）时。 

上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白