CSS盒模型

模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。

CSS盒模型有两种：content-box(内容盒)和border-box（边框盒）

• content-box width=content内容宽度
• border-box width=content内容宽度+padding+border

margin边距的合并

兄弟margin上下外边距会合并，合并后的外边距的高度等于两者中最大的边距的值。 父子margin上下外边距会合并，合并后的外边距的高度等于两者中最大的边距的值。

如何阻止父子margin合并

• 父元素添加padding或boeder
• 父元素添加 overflow：hidden

兄弟margin合并可以用添加display：inline-block消除