1、margin 区域始终是透明的。
2、margin 值有4种写法：
- 写一个属性值=代表四边设置的值；
- 两个值分别=顶底边框，两侧边框；
- 三个值=顶边框，两侧边框，底边框；
- 四个值=顺时针顺序的边框，也就是分别对应 上 右 下 左 边框。
3、嵌套关系里父子元素的margin上下值的传递：
HTML嵌套关系里面，当前元素的 margin 的上下值会传递给父级，并作用于父级，并一直往上传递。这个问题发生的原因是
根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
所以，父元素的第一个子元素的上边距 margin-top 如果碰不到有效的 border 或者 padding ，就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border 或者 padding 就可以有效的管制这个目无领导的margin 防止它越级。
解决办法：
- ①父级设置一个边框；
- ②父级设置一个上下边框的padding值(非0值)
- ③父级使用overflow:hidden;
- 以上方法在IE6下不行，IE6必须触发BFC和haslayout ，也就是同时设置overflow:hidden和zoom:1;才行
4、垂直相邻的元素 margin 上下值的合并
当两个垂直外边距 margin 相遇时，它们将合并成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
5、在块元素下、行内元素下区别：
在块级元素下，可设定四边 margin；
在内联元素下，可设定左右 margin，上下值没效果。
（但是内联元素有一部分特例，称为可置换元素，如img、input、select、textarea、button、label等，这类元素拥有内在尺寸，可以设置width/height属性，同时margin也可以设置四边。）
总结：margin 属性可以应用于几乎所有的元素，除了表格显示类型（不包括 table-caption, table and inline-table）的元素，而且垂直外边距对非置换内联元素（non-replaced inline element）不起作用。
想要打赏，请点击这里