删格盒模型设计

删格盒模型设计

栅格盒模型

 1. 容器两边具有15px的padding
 2. 行 两边具有-15px的margin
 3. 列 两边具有15的padding

为什么这样设置呢？

1.容器两边具有15px的padding

目的：为了维护槽宽的规则，列两边必须得要15px的padding。
如图下所示：
一行中有两列，没列的两边都有15px的槽宽。

2.行 两边具有-15px的margin

目的：为了使列嵌套行， 行两边必须要有-15px的margin。
如下图所示：
因为列中有15px的槽宽，当列中嵌套行时，为了充满整个容器，行 设置-15px的margin值，和列中的15px padding值抵消。

3.列 两边具有15的padding

目的：为了让容器可以包裹住行，容器两边必须要有15px的padding。
如下图所示：
由于行设置的-15px的margin值，容器的两边会多出来15px,
列两边具有15的padding值，和-15px的margin值抵消。