margin 外边距 ​

margin 重叠问题 ​

• 水平边距不会重叠
• 垂直边距可能重叠

解决重叠方案 ​

1. 触发 BFC 方案（推荐） ​

• 外层元素 overflow 值不为 visible
• 内层元素 float 值不为 none
• 内层元素 display: inline-block / flex / inline-flex / table-cell
• 内层元素 postion: absolute;
• display: flow-root 这是一个块级元素盒子，一个新的属性，用于创建 BFC

2. 其它方案（不建议） ​

• 内层元素透明边框 border: 1px solid transparent;
• 内层元素 padding: 1px;