CSS padding(填充)是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的内边距。

当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。

CSS内边距

说明
length规定以具体单位计的填充值,比如像素、厘米等。默认值是 0px
%规定基于父元素的宽度的百分比的填充
inherit指定应该从父元素继承padding

1. 使用像素值(px)设置填充

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS简单学习</title>
        <style type="text/css">
            p.nopadding {
                background-color: #00FFFF;
            }
            p.padding {
                background-color: #00FFFF;
                padding-top: 25px;
                padding-bottom: 25px;
                padding-left: 50px;
                padding-right: 50px;
            }
        </style>
    </head>

    <body>
        <p>这是一个没有指定填充边距的段落</p>
        <p>这是一个指定过填充边距大小的段落</p>
    </body>
</html>

运行结果:

使用像素值(px)设置填充

2. 使用margin简写属性设置填充(厘米值cm、百分比值%)

padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。

实例:

(1)padding:10px 5px 15px 20px;

a.上填充是 10px

b.右填充是 5px

c.下填充是 15px

d.左填充是 20px

(2)padding:10px 5px 15px;

a.上填充是 10px

b.右填充和左填充是 5px

c.下填充是 15px

(3)padding:10px 5px;

a.上填充和下填充是 10px

b.右填充和左填充是 5px

(4)padding:10px;

a.所有四个填充都是 10px

注意: 负值是不允许的。

<!DOCTYPE html>
<html>
    <head>
            <meta charset="utf-8">
            <title>CSS简单学习</title>
            <style type="text/css">
                p {
            background-color: orange;
            }
            p.ex1 {
padding: 2cm 6cm 3cm 8cm;
            }
            p.ex2 {
padding: 5% 30%;
            }
        </style>
    </head>

    <body>
        <p>这是一个没有指定填充边距大小的段落</p>
        <p>这是一个使用&quot;厘米cm&quot;指定填充边距大小的段落</p>
        <p>这是一个使用&quot;百分比值%&quot;指定填充边距大小的段落</p>
    </body>
</html>

运行结果:

使用margin简写属性设置填充

属性描述
padding-top设置元素内容区上方的内边距
padding-right设置元素内容区右侧的内边距
padding-bottom设置元素内容区下方的内边距
padding-left设置元素内容区左侧的内边距
padding内边距属性的缩写形式,可以同时设置上下左右四个方向上的内边距


点赞(0)

C语言网提供由在职研发工程师或ACM蓝桥杯竞赛优秀选手录制的视频教程,并配有习题和答疑,点击了解:

一点编程也不会写的:零基础C语言学练课程

解决困扰你多年的C语言疑难杂症特性的C语言进阶课程

从零到写出一个爬虫的Python编程课程

只会语法写不出代码?手把手带你写100个编程真题的编程百练课程

信息学奥赛或C++选手的 必学C++课程

蓝桥杯ACM、信息学奥赛的必学课程:算法竞赛课入门课程

手把手讲解近五年真题的蓝桥杯辅导课程

Dotcpp在线编译      (登录可减少运行等待时间)