详解CSS中的margin负值

Posted 2020-10-12

前言：　

　margin作为一个在平常工作中高频出现的属性，其合并规则和负值的使用却总是让人头大，本文就margin的负值和重叠进行梳理，如有错误，欢迎指正（反正我是菜鸡，手动滑稽）

1.display对margin的影响

　　当元素的display属性不同时，margin在元素上的表现形式也不同

　　【1】display:block 　　四个方向的margin均有效

　　【2】display:inline　　上下方向的margin无效

　　【3】display:inline-block

　　　　由于vertical-align属性的默认值为baseline(该元素相对于所在行的基线垂直对齐)，因此在视觉上display:inline-block无效，设置vertical-align为其他值时，会有效果。

2.重叠

　　margin负值的重叠也和display属性有关

　　【1】两个block元素重叠时，后面的元素可以覆盖前面元素的背景，但是无法覆盖其内容

　　【2】当两个元素都是inline或inline-block的元素时，后面的元素会覆盖前面元素的背景和内容

　　【3】当inline（inline-block）元素与block元素重叠时，inline（inline-block）元素的背景会覆盖block的背景，但是元素内容会以后面的元素为准。

3.浮动

　　【1】当block元素与浮动元素重叠时，其边框和背景在浮动元素下显示，内容在浮动元素之上显示

　　【2】当inline或inline-block元素和浮动元素重叠时，其边框、背景和内容都在浮动元素之上显示

4.定位

　　【1】定位元素（position不为默认值）会覆盖其他元素的背景和内容

　　【2】将relative应用于inline元素上时，由于无法改变其行内元素本质，上下margin仍存在问题