WithCoderWithCoderWithCoder

css外边距margin属性介绍

    css的margin属性用于设置元素外边距的宽度。可以使用auto,长度值或百分比来定义外边距,外边距始终透明,但值可以为负数。margin(简写)参数值的赋值方式有以下几种:

    • 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。

    • 如果只提供一个,将用于全部的四边。

    • 如果提供两个,第一个用于上、下,第二个用于左、右。

    • 如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。

    另外,我们也可以给单独的边设置外边距,包括margin-top(上)、margin-right(右)、margin-bottom(下)、margin-left(左),它们的取值方式和简写方式是一样的。

    margin属性对常规流中同级块元素和行内元素的影响

    1. 单个元素的margin

    对块元素,使用margin不会影响元素的尺寸,不过margin会影响元素的位置。  

    对于行内非替换(non-Replaced)元素可以使用该属性设置左、右两边的外边距,但垂直方向上没有效果。   

    <style>
        .box {
            margin-bottom30px;
        }

        .box1,
        .box2 {
            height50px;
            background-colortan;
        }

        .box12 {
            height20px;
            background-colortomato;
            /* 常规流中块元素的margin设置 */
            margin10px;
        }

        span {
            height100px;
            background-colorgrey;
            /* 常规流中内联元素的margin设置 */
            margin10px;
        }
    </style>
    <!-- 常规流中块元素的margin -->
    <div class="box">
        <div class="box1"></div>
        <div class="box12"></div>
        <div class="box2"></div>
    </div>
    <!-- 常规流中内联元素的margin -->
    <div class="box">
        <div class="box1"></div>
        <span>Hello</span>
        <div class="box2"></div>
    </div>

    常规流中块元素和行内元素设置margin的效果:

    1-200403160230915.png

    2.多个元素margin

    对块元素,相邻margin在垂直方向会发生叠加,叠加后的距离取两个值中较大的一个。  

    对于行内非替换(non-Replaced)元素垂直方向无效果,水平方向的margin不会叠加,两个元素的距离是相邻margin值相加后的结果。    

    <style>
        .box {
            margin-bottom30px;
        }

        .box1,
        .box2 {
            height50px;
            background-colortan;
        }

        .box12 {
            height20px;
            background-colortomato;
            /* 常规流中块元素的margin设置 */
            margin10px;
        }

        .box123 {
            height20px;
            background-colorgreenyellow;
            /* 常规流中块元素的margin设置 */
            margin10px;
        }

        span {
            height100px;
            background-colorgrey;
            /* 常规流中内联元素的margin设置 */
            margin10px;
        }
    </style>

    <div class="box">
        <div class="box1"></div>
        <!-- 常规流中垂直块元素的相邻margin发生了叠加 -->
        <div class="box12"></div>
        <div class="box123"></div>
        <div class="box2"></div>
    </div>
    <div class="box">
        <div class="box1"></div>
        <!-- 常规流中内联元素垂直的margin无效果,水平方向不叠加 -->
        <span>Hello</span>
        <span>wrold</span>
        <div class="box2"></div>
    </div>

    多个margin效果如下:

    1-200403162424947.png

    margin属性对常规流中父子元素的影响

    对内联子元素,设置margin后,效果没有变化,垂直方向上margin无效果。  

    对于子块元素,设置margin后,水平方向效果不变,但垂直方向出现了问题。(我们本意想通过margin使子元素居中,但子元素顶部和父元素发生了重叠,导致父子元素位置一起向下移动)    

    <style>
        .box {
            width100px;
            height100px;
            background-colortomato;
        }

        .box1 {
            width50px;
            height50px;
            background-coloryellowgreen;
            margin25px;
        }

        .box2 {
            width100px;
            height100px;
            background-colorgrey;
        }

        span {
            background-coloryellowgreen;
            margin10px;
        }
    </style>

    <!-- 常规流中父子(块元素)margin的水平效果不变,但垂直方向父子合并在了一起 -->
    <div class="box">
        <div class="box1"></div>
    </div>

    <!-- 常规流中父子(内联元素)margin的效果不变,垂直方向无效果 -->
    <div class="box2">
        <span>hello</span>
    </div>

    效果如下图
    1-200403164615111.png

    对于上面这个父子一起移动的问题,网络上解决方法有下面几种:

        方法一:给父元素添加padding-top值

        方法二:给父元素添加border值

        方法三:给父元素添加属性overflow:hidden;

        方法四:给父元素或者子元素声明浮动float

        方法五:使父元素或子元素声明为绝对定位:position:absolute;

        方法六:给父元素添加属性 overflow:auto; positon:relative;

        方法七:在父元素内容前面通过::before伪元素插入一个空字符串(推荐)  ,代码如下:      

    .box::before {
            content"";
            displaytable;
    }

    1-2004031F50M50.png

欢迎分享交流,转载请注明出处:WithCoder » css外边距margin属性介绍