WithCoderWithCoderWithCoder

css内边距padding属性介绍

    css的padding属性用于设置元素内边距的宽度。可以使用长度值或百分比来定义内边距,注意值不能为负数。padding(简写)参数值的赋值方式有以下几种:

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

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

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

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

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

    padding属性对块元素和行内元素的影响

    对块元素,在css中默认的box-sizing是content-box(标准的盒模型),使用padding会增加元素的尺寸。而对于box-sizing是border-box的块元素,padding不会影响元素的尺寸,但会影响块元素内容区域的尺寸,如下图(元素的内容受到padding的影响)

    1-200402224440Z2.png

    而行内非替换(non-Replaced)元素可以使用该属性设置左、右两边的内边距;由于内联元素垂直方向的行为表现完全受line-height和vertical-align的影响,在设置padding时,行内非替换元素上设置的内边距不会影响行高计算,视觉上并没有改变上一行下一行内容的间距,因此给我们感觉垂直padding没有起作用。但如果给内联元素加上背景色可以发现尺寸空间确实受padding影响,但是对上下元素的布局没有任何影响,仅仅是垂直方向上发生了重叠

    <style>
        .box1,
        .box2 {
            height50px;
            background-colortan;
        }

        span {
            height100px;
            background-colorgrey;
            padding10px;
        }
    </style>
    <div class="box">
        <div class="box1"></div>
        <span>Hello</span>
        <div class="box2"></div>
    </div>

    以上代码运行结果如下,可以看到垂直方向上发生了重叠现象:

1-2004021A330118.png

   padding与图形绘制

    1. 实现“三道杠”效果

    1-20040222594T95.png

    <!-- 实现三道杠效果 -->
    <style>
        div {
            width100px;
            /* 设置中间内容高度为10px */
            height10px;
            /* 上下内边距为20px */
            padding20px 0;
            /* 上下边框宽度为10px */
            border-top10px solid;
            border-bottom10px solid;
            background-colorcurrentColor;
            background-clipcontent-box;
        }
    </style>
    <div></div>    

    2. 实现双层原点效果

    1-20040223022I29.png

    <!-- 实现双层原点效果 -->
    <style>
        div {
            /* 设置圆半径100px */
            width100px;
            height100px;
            /* 设置圆环10px */
            padding10px;
            /* 上下边框宽度为10px */
            border10px solid;
            /* 设置圆角半径50% */
            border-radius50%;
            background-colorcurrentColor;
            background-clipcontent-box;
        }
    </style>
    <div></div>

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