深入理解margin属性

深入理解margin属性

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值

注意: 外边距控制的是元素外部空出的空间。相反,padding 操作元素内部空出的空间

还有就是上、下外边框的设置对内联元素无效,如:<span><code>

margin属性构成

  • margin-top:边距

  • margin-bottom:边距

  • margin-left:边距

  • margin-right:边距

语法

/* 应用于所有边 */
margin: 1em;
margin: -3px;

/* 上边下边 | 左边右边 */
margin: 5% auto;

/* 上边 | 左边右边 | 下边 */
margin: 1em auto 2em;

/* 上边 | 右边 | 下边 | 左边 */
margin: 2px 1em 0 auto;

/* 全局值 */
margin: inherit;
margin: initial;
margin: unset;

  注意:取值可以为负数!取值为负时元素会比原来更接近临近元素

margin 属性接受 1~4 个值:

  • 当只指定一个值时,该值会统一应用到全部四个边的外边距上。
  • 指定两个值时,第一个值会应用于上边和下边的外边距,第二个值应用于左边和右边
  • 指定三个值时,第一个值应用于上边,第二个值应用于右边和左边,第三个则应用于下边的外边距。
  • 指定四个值时,依次(顺时针方向)作为上边右边下边,和左边的外边距。
margin: 5%;                 /* 所有边:5% 的外边距 */

margin: 10px;               /* 所有边:10px 的外边距 */

margin: 1.6em 20px;         /* 上边和下边:1.6em 的外边距 */
                            /* 左边和右边:20px 的外边距  */

margin: 10px 3% -1em;       /* 上边:     10px 的外边距 */
                            /* 左边和右边:3% 的外边距   */
                            /* 下边:     -1em 的外边距 */

margin: 10px 3px 30px 5px;  /* 上边:10px 的外边距 */
                            /* 右边:3px 的外边距  */
                            /* 下边:30px 的外边距 */
                            /* 左边:5px 的外边距  */

margin: 2em auto;           /* 上边和下边:2em 的外边距 */
                            /* 水平方向居中            */

margin: auto;               /* 上边和下边:无外边距 */
                            /* 水平方向居中        */

 

备注

1.水平居中

在 IE8-9 这样的不支持弹性盒布局的旧式浏览器中,要实现在父元素中居中,可使用 margin: 0 auto;

2. 外边距重叠

上下元素的下上外边距有时会重叠,实际空出的空间长度变为两外边距中的较长值也就是说:谁的外边距大就显示谁的外边距(塌陷)

怎么解决呢?

(1)如果元素处于兄弟关系,可以选择只给一个盒子设置margin

(2)如果元素处于嵌套关系,可以选择:给父亲添加padding、给父亲添加透明下边框、给父亲加overflow:hidden(FTB)

 

本文来自云海天,作者:不知名前端李小白,转载请注明原文链接:https://www.cnblogs.com/libo-web/p/15398859.html

原文链接:https://www.cnblogs.com/libo-web/archive/2021/10/15/15398859.html