百度SEO优化 » css样式 » padding在html中什么意思

padding在html中什么意思

padding是盒子的内边距,就是盒子边框的内壁到文字的距离,它的意思就是限制一个距离,在html代码中非常常见。

padding在html中什么意思

padding有上下左右四个方向,每一个方向都可以单独设置。相当于padding这个大的属性下面又细分了4个方向的小属性。

这4个小属性,都是padding后面跟一个小短横,然后跟方向描述词,表示它是哪一个方向的padding。

padding的每一个方向上的数值,都是可以不一样的。

接下来我在vscode和浏览器中演示下width、height、padding这几个属性。我创建了一个叫"width、height、padding.html"的文件。代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>width、height、padding属性详解</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            background-color: red;
            color:#fff;
            padding-top: 30px;
            padding-right: 20px;
            padding-bottom: 10px;
            padding-left: 5px;
        }
</style>
</head>
<body>
    <div class="box">
        所谓的光辉岁月,并不是后来闪耀的日子,而是无人问津时,你对梦想的偏执。
    </div>
</body>
</html>

在上面的代码中,我设置内容区域距离div盒子上边框的距离是30像素,距离div盒子右边框的距离是20像素,距离div盒子下边框的距离是10像素,距离div盒子左边框的距离是5像素。

在浏览器中,右键检查,我们看到盒子模型是这样:

我么看到内容区域是300像素宽度乘以200像素高度,上下左右方向的内边距都显示出来了。鼠标滑到盒子模型的300*200内容区域上,效果更直观。

padding的写法

1、四数值写法

四数值写法,每一个数值就是分别代表某一个方向上的数值。

第一个数值代表内容和上边框方向的距离,

第二个数值代表内容和右边框方向的距离,

第三个数值代表内容和下边框方向的距离,

第四个数值代表内容和左边框方向的距离,

每一个数值之间用空格隔开。

比如:

这就是四数值写法。

使用这种写法,比我上面的代码中的写法更简洁。上面的代码中,我是按照padding-top、padding-right、padding-bottom、padding-left这四个小属性写的,要写4行代码,而用这种四数值写法,只需要一行代码,就能把四个方向都设置了。

只要记住,四数值写法,就是按照上右下左的顺序来设置padding的,你也可以按照钟表的顺时针方向记忆。

2、三数值写法

三数值写法数值之间也是用空格隔开。三个数值分别表示上、左右、下的方向的距离。

比如:

这就是三数值写法,第一个值表示上方向10像素,第二个值表示左右方向,就是左方向是20像素,右方向也是20像素,第三个值表示下方向30像素。

三数值写法,也可以按照上右下左去记,第一个数值是上,第二个数值是右,第三个数值是下,第四个数值是左,但是左方向没有值,所以左方向就和右方向一样

3、二数值写法

二数值写法数值之间也是用空格隔开。分别表示上下、左右方向的距离。

比如:

这就是二数值写法。也就是说,如果你给padding设置了2个值,CSS就会认为,第一个值是上下方向都是同样的距离,第二个值表示左右方向,也是同样的距离。

二数值写法,也可以按照上右下左去记。比如上面的示例,上10px,右20px,下没有,所以跟上一样,也是10px,左也没有,所以跟右一样,也是20px。

4、一数值写法

一个数值,表示上下左右四个方向距离都一样。

接下来我们看一个盒子模型图:

上下都是30像素,左右没有,那么padding属性如何写呢?

没错,就是

但是不能写成----padding:30px;

这样写就错了,这样写就表示四个方向都是30像素,显然是不对的。

左右没有,但是也必须要写一个0,表示左右都是0,CSS中,出现0这个数值,后面可以不带单位。

再看这个盒子模型:

上、左右都是40像素,下没有,

我们可以用三数值写法,即padding:40px 40px 0;

但是更推荐一种新写法:

这种写法就更能体现CSS的层叠性,我们先设置4个方向都是40,然后再设置下方向为0,去覆盖前面一条属性中的下方向的数值,非常有灵性。

这种写法就是用小属性去层叠大属性,非常推荐这种写法。

关于padding的各种写法,请自己去写代码验证练习。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注