详解CSS中的margin负值

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了详解CSS中的margin负值相关的知识,希望对你有一定的参考价值。

前言: 

 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仍存在问题

  

以上是关于详解CSS中的margin负值的主要内容,如果未能解决你的问题,请参考以下文章

css中负值(px)的问题有啥?

负值之美:负margin在页面布局中的应用

边距的小知识点;

CSS长度单位中的负长度值

CSS看了C站CSDN源码,这次带你彻底搞清楚经典的 双飞翼布局 与 圣杯布局 - margin负值 - 浮动 - padding

element-ui栅格系统之margin为负值的情况总结