margin特性深入分析与总结

今天写了个小demo，总体不难，但一些细节需要注意：

1）如下图所示，蓝色区域为白色box的padding，橙色区域为每条数据项的margin-bottom，那么如何解决最后一条记录margin-bottom占位的问题？

2）如下图所示，设置外层box border为1px，设置每一行的border-bottom为1px，那么如何解决最后一行border-bottom与box border-bottom紧贴，显示2px border的问题？

为解决上面的问题，需要理解margin自身的一些特性，下面对margin进行总结，以便以后回顾与查找。

块级元素外边距

（1）两个【上下相邻】且【不浮动】的块级元素间，两元素间的垂直外边距（margin）为相邻外边距中的较大者（合并）。

margin：20px

margin：30px

如：橙色元素margin-bottom为20px，灰色元素margin-top为30px，则两元素之间的垂直外间距为较大者30px

（2）两个【相邻】且【浮动】的块级元素间，两元素间的外边距（margin）为相邻外边距之和（不合并）。

margin：20px

margin：20px

如：橙色元素margin-right为20px，灰色元素margin-left为20px，则两元素之间的外间距相邻边距之和40px

行内元素外边距

（1）行内元素不占上下外边距。

margin：0px margin：30px

如：橙色元素margin为0px，灰色元素margin为30px，但两元素水平显示，上下左右边距并未发挥作用

（2）行内元素左右外边距不会合并。

margin：20px margin：30px

如：橙色元素margin为20px，灰色元素margin为30px，两元素间的外边距约为相邻外边距之和50px（不合并），事实上即使两行内元素间没有水平边距也不会完全紧贴

负margin

• margin参考线：即margin移动的基准线，此基准线相对于box是静止的，而margin的数值，就是box相对于参考线的位移量
• 1、top、left参考线：
  设置了margin的元素：
  （1）以父级元素content的上（左）边为参考线，自身向下（右）移动
  （2）以相邻元素margin的下（右）边为参考线，自身向下（右）移动
• 2、bottom、right参考线：
  设置了margin的元素：
  （1）以元素本身border的下（右）边为参考线，与其相邻的元素向下（右）移动
• 以上的位移方向为margin数值为正值时的情况，如果margin是负值，则位移方向相反
• 更多负margin使用案例，推荐阅读：负值之美：负margin在页面布局中的应用

Container1

margin:-10px 20px -20px 40px

margin:0

如：Container1中，两个元素为【不浮动】的块级元素。
※修改橙色元素的margin-top，会影响橙色元素相对于Container1向上或向下移动；
※修改橙色元素的margin-bottom，会影响黄色元素相对于橙色元素向上或向下移动
同时注意：DOM结构中后面的元素会叠加在前面元素的上面

Container2

margin:-10px -20px -20px 40px

margin:0

如：Container2中，两个元素为【浮动】的块级元素。
※修改橙色元素的margin-left，会影响橙色元素相对于Container2向左或向右移动；
※修改橙色元素的margin-right，会影响黄色元素相对于橙色元素向左或向右移动

百分比margin

• 元素margin为百分比时，会根据其父元素的【宽或高】来计算margin的四个具体值
• 1、横向显示（默认）：基于父元素的【宽度】的百分比计算外边距
• 2、纵向显示：基于父元素的【高度】的百分比计算外边距（测试writing-mode这玩意只有IE能使，IE5就有，并且到IE11还坚挺的支持着）

Demo1：父元素横向显示

margin: 10% 5%

如：Demo1中：
margin-left、margin-right=$Demo1.width()*5% = 25px;
margin-top、margin-bottom= $Demo1.width()*10% = 50px

Demo2：父元素纵向显示（切换为IE测试）

margin: 10% 5%

如：Demo2中：
margin-left、margin-right=$Demo1.height()*5% = 10px;
margin-top、margin-bottom= $Demo1.height()*10% = 20px

 

最后附上demo源码，一些细节有待改进：http://runjs.cn/code/dn7ibwnt