CSS基础---盒子模型内边距属性

是小穆啊

于 2023-04-21 15:29:37 发布

阅读量278

点赞数

分类专栏： CSS 文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_48055520/article/details/130288572

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

为了调整内容在盒子中的显示位置，常常需要给元素设置内边距。内边距也叫做内填充，指的是元素内容与边框之间的距离。在CSS中padding属性用于设置内边距，同边框属性border一样，内边距属性padding也是复合属性。

1、未设置内边距属性的div盒子效果图如下图所示：
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内边距属性</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 5px solid pink;
        }
    </style>
</head>

<body>
    <div>
        未设置内边距属性的效果
    </div>
    <hr>
    <div id="one">
        设置内边距属性的效果
    </div>
</body>

</html>

2、设置左内边距属性的div盒子效果图如下图所示：

在这里插入图片描述
图中显示的绿色部分即为设置的左内边距

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内边距属性</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 5px solid pink
        }

        #one {
            padding-left: 20px;
        }
    </style>
</head>

<body>
    <div>
        未设置内边距属性的效果
    </div>
    <hr>
    <div id="one">
        设置内边距属性的效果
    </div>
</body>

</html>

3、设置完内边距属性的效果图如下图所示：
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内边距属性</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 5px solid pink;
        }

        #one {
            padding-top: 20px;
            padding-right: 30px;
            padding-bottom: 30px;
            padding-left: 20px;
        }
    </style>
</head>

<body>
    <div>
        未设置内边距属性的效果
    </div>
    <hr>
    <div id="one">
        设置内边距属性的效果
    </div>
</body>

</html>

padding相关属性的取值可为auto自动（默认值）、不同单位的数值、相对于父元素（或浏览器）的宽度百分比。在实际工作中padding属性值最常用的单位是像素值px，并且不允许使用负值。

同边框相关属性一样，使用复合属性padding定义内边距时，必须按照顺时针顺序采用值复制的原则，1个值为四边，2个值为上下/左右，3个值为上/左右/下。

4、内边距综合设置效果图如下：

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内边距属性</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 5px solid pink;
        }

		/* 内边距综合设置 */
        #one {
            padding: 20px 30px 20px;
        }
    </style>
</head>

<body>
    <div>
        未设置内边距属性的效果
    </div>
    <hr>
    <div id="one">
        设置内边距属性的效果
    </div>
</body>

</html>

是小穆啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS基础---盒子模型内边距属性

同边框相关属性一样，使用复合属性padding定义内边距时，必须按照顺时针顺序采用值复制的原则，1个值为四边，2个值为上下/左右，3个值为上/左右/下。为了调整内容在盒子中的显示位置，常常需要给元素设置内边距。内边距也叫做内填充，指的是元素内容与边框之间的距离。相关属性的取值可为auto自动（默认值）、不同单位的数值、相对于父元素（或浏览器）的宽度百分比。图中显示的绿色部分即为设置的左内边距。属性用于设置内边距，同边框属性。属性值最常用的单位是像素值。1、未设置内边距属性的。2、设置左内边距属性的。
复制链接

扫一扫