css盒子模型之padding内边距

最新推荐文章于 2023-07-26 10:34:49 发布

黄丫丫07

最新推荐文章于 2023-07-26 10:34:49 发布

阅读量345

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_51495354/article/details/127811709

版权

用于设置内边距，即边框与内容之间的距离。

属性	作用
Padding-left	左内边距
Padding-right	右内边距
Padding-top	上内边距
Padding-bottom	下内边距

<!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>padding</title>

    <style>

        div {

            width: 300px;

            height: 300px;

            background-color: pink;

            padding-top: 20px;

            padding-bottom: 20px;

            padding-left: 20px;

            padding-right: 20px;

        }

    </style>

</head>



<body>

    <div>

        盒子内容是content盒子内容是content盒子内容是content盒子内容是content盒子内容是content

    </div>

</body>



</html>

padding: 5px;

padding: 5px 10px;

padding: 5px 15px 10px;

padding: 5px 10px 15px 20px;

Padding属性可以有一到四个值

值的个数	表达意思
Padding:5px;	1个值，代表左右都有5像素内边距
Padding:5px 10px;	2个值，代表上下内边距是5px，左右是10px
Padding:5px 15px 10px;	3个值，代表上：5px 左右：15px 下：10px
Padding:5px 10px 15px 20px;	4个值，代表上右下左，顺时针