padding(内边距)
padding
是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的内边距。
一个元素的内边距区域指的是其内容与其边框之间的空间
注意:内边距控制的是元素内部空出的空间,相反,
margin
操作元素外部空出的空间
padding属性构成
-
padding-top:内容
上
边距 -
padding-bottom:内容
下
边距
-
padding-left:内容
左
边距 -
padding-right:内容
右
边距
单独使用 padding 属性可以改变上下左右的填充:
语法
/* 应用于所有边 */ padding: 1em; /* 上边下边 | 左边右边 */ padding: 5% 10%; /* 上边 | 左边右边 | 下边 */ padding: 1em 2em 2em; /* 上边 | 右边 | 下边 | 左边 */ padding: 5px 1em 0 2em; /* 全局值 */ padding: inherit;/* inherit:继承父元素padding */ padding: initial;/* initial:设置padding属性为它的默认值(IE 不支持) */ padding: unset;/* unset:不设置padding */
注意:取值不能为负数!
padding
属性接受 1~4 个值:
- 当只指定一个值时,该值会统一应用到全部四个边的内边距上。
- 指定两个值时,第一个值会应用于上边和下边的内边距,第二个值应用于左边和右边。
- 指定三个值时,第一个值应用于上边,第二个值应用于右边和左边,第三个则应用于下边的内边距。
- 指定四个值时,依次(顺时针方向)作为上边,右边,下边,和左边的内边距
padding: 5%; /* 所有边:5% 的内边距 */ padding: 10px; /* 所有边:10px 的内边距 */ padding: 10px 20px; /* 上边和下边:10px 的内边距 */ /* 左边和右边:20px 的内边距 */ padding: 10px 3% 20px; /* 上边: 10px 的内边距 */ /* 左边和右边:3% 的内边距 */ /* 下边: 20px 的内边距 */ padding: 1em 3px 30px 5px; /* 上边:1em 的内边距*/ /* 右边:3px 的内边距*/ /* 下边:30px 的内边距*/ /* 左边:5px 的内边距*/
本文来自博客园,作者:不知名前端李小白,转载请注明原文链接:https://www.cnblogs.com/libo-web/p/15393972.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)