padding属性用于设置内边距

烤红薯卖地瓜

于 2024-06-18 15:49:20 发布

阅读量238

点赞数 7

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/qq_17131933/article/details/139772678

版权

内边距(padding)

padding属性用于设置内边距。是指边框与内容之间的距离。padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

属性值设置

温馨提示: 后面跟几个数值表示的意思是不一样的。

值的个数	表达意思
1个值	padding:上下左右边距比如padding: 3x; 表示上下左右都是3像素
2个值	padding: 上下边距左右边距比如 padding: 3x sx; 表示上下3像素左右 5像素
3个值	padding:上边距左右边距下边距比如 padding: 3x 烈x 10Rx; 表示上是3像素左右是5像素下是10像素
4个值	padding:上内边距右内边距下内边距左内边距比如: padding: px X 10RX 1Rx; 表示上% 右是下 10RX 左15RX 顺时针

内边距可以改变内容所在的位置

内边距会改变盒子的大小

外边距：改变的是盒子本身所在的位置（不会改变盒子的大小）

margin：

<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
            4.内边距(padding)
                padding属性用于设置内边距。是指边框与内容之间的距离。padding-top:上内边距
                padding-right:右内边距
                padding-bottom:下内边距
                padding-left:左内边距

            4.1 属性值设置
                温馨提示: 后面跟几个数值表示的意思是不一样的。
                    值的个数            表达意思
                    1个值               padding:上下左右边距 比如padding: 3x; 表示上下左右都是3像素
                    2个值               padding: 上下边距 左右边距 比如 padding: 3x sx; 表示 上下3像素 左右 5像素
                    3个值               padding:上边距 左右边距 下边距 比如 padding: 3x 烈x 10Rx; 表示 上是3像素 左右是5像素 下是10像素
                    4个值               padding:上内边距 右内边距 下内边距 左内边距 比如: padding: px X 10RX 1Rx; 表示上% 右是下 10RX 左15RX 顺时针
        
        
        内边距可以改变内容所在的位置
        内边距会改变盒子的大小


        外边距：改变的是盒子本身所在的位置（不会改变盒子的大小）
        margin：
        
        */
        
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            padding-left: 50px;
            background-image: url(./SIM900A\ GSM模块.jpg);
            background-repeat: no-repeat;
            background-position: 0 5px;
            background-size: 10px 10px;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
</body>

</html>

插入图片和背景图片区别
1.插入图片我们用的最多比如产品展示类移动位置只能靠盒模型 padding margin
2.背景图片我们一般用于小图标背景或者超大背景图片背景图片只能通过

    img {
            width: 200px;
            /*插入图片更改大小 width 和 height */
            height: 210px;
            margin-top: 30px;
            /*插入图片更改位置 可以用margin 或padding盒模型 */
            margin-left: 50px;
            /*插入当图片也是一个盒子*/
        }
        
    div {
            width: 400px;
            height: 400px;
            border: 1px solid purple;
            background: #fff url(images/sun.jpg)no-repeat;
            background-position: 30px 50px;
            /*背景图片更改位置 用 background-position */
        }