QD1-P32 CSS 边框属性（3）padding（元素的内边距）

news2025/1/19 18:46:15

本节学习：CSS padding属性（元素的内边距）

本节视频

https://www.bilibili.com/video/BV1n64y1U7oj?p=32

‍

padding 属性的用途

Clip_2024-10-14_19-29-16

‍

在CSS中，padding 属性用于设置元素内部的空间，即在元素内容和其边界（border）之间添加空间。这可以增加元素的可读性，也可以用来调整布局。

‍

padding 属性的基本用法

单一值

设置一个值时，应用到四个方向的内边距：

padding: 10px; /* 上右下左都是10px */

‍

两个值

设置两个值时，元素顶部和底部内边距为第一个值，左右内边距为第二个值：

padding: 10px 20px; /* 顶部和底部是10px，左右是20px */

‍

三个值

设置三个值时，顶部内边距为第一个值，左右内边距为第二个值，底部内边距为第三个值：

padding: 10px 20px 30px; /* 顶部是10px，左右是20px，底部是30px */

‍

四个值

设置四个值时，上右下左，按顺时针应用：

padding: 10px 20px 30px 40px; /* 顶部是10px，右侧是20px，底部是30px，左侧是40px */

‍

单个方向的padding属性

也可以单独设置某个方向的内边距：

padding-top
padding-right
padding-bottom
padding-left

例如：

padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;

‍

百分比值

padding 属性也可以使用百分比来设置，这个百分比是相对于元素的宽度（而不是高度）计算的：

padding: 5%; /* 所有方向的内边距都是元素宽度的5% */

‍

注意事项

padding 属性不可为负值。
padding 会影响元素的布局，因为它增加了元素的实际尺寸。
在一些框模型（如 box-sizing: border-box;）中，padding 不会影响元素的总宽度和高度，因为它是从已设定的宽度和高度中减去的
使用 padding 时，要考虑到它对页面布局的整体影响，特别是在响应式设计中。

建议少用内边距padding。

‍

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2213996.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！