盒子模型的内边距——padding

最新推荐文章于 2025-03-10 14:41:13 发布

黄鼠狼

最新推荐文章于 2025-03-10 14:41:13 发布

阅读量3.1k

点赞数 3

文章标签： css3 css html

本文链接：https://blog.youkuaiyun.com/weixin_44004120/article/details/122521865

版权

本文详细探讨了CSS中的padding属性，包括基础属性、复合属性及其对盒子大小的影响。当为盒子设置padding时，内容与边框间产生距离，导致盒子实际大小增加。若盒子已有固定宽高，padding会使盒子扩大；反之，未设定宽高的盒子则不会因padding撑开。在实际应用中，padding常用于导航栏设计，通过内边距实现内容居中显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

盒子模型的内边距——padding

盒子模型的内边距——padding

盒子由border（边框）、content（内容）、padding（内边距）、margin（外边距）。padding属性用于设置内边距，既边框与内容之间的距离。

padding的基础属性

单位一般是px：

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

padding复合属性

padding简写属性可以有一到四个值。

值的个数	表达意思
padding：5px；	1个值，代表上下左右都5px
padding：5px 10px；	2个值，代表上下5px，左右10px
padding：5px 10px 20px；	3个值，代表上5px 左右10px 下20px
padding：5px 10px 20px 30px；	4个值，代表上5px 右10px 下20px 左30px （顺时针）

padding会影响盒子实际大小

给盒子指定padding值之后，会发生2件事情：

内容和边框有了距离，添加了内边距。
padding影响了盒子的实际大小。

也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

案例：

加padding前：

<style>
        div {
     
            width: 200px;
            height: 200px;  
            background-color: aquamarine;
        }
    </style>
<body>
    <div> 123</div>
</body>

运行结果：
在这里插入图片描述

加padding后：

<style>
        div {
     
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            padding: 20px;
        }
    </style>
<body>

最低0.47元/天解锁文章