0

0

css里的padding属性怎么使用

php中世界最好的语言

php中世界最好的语言

发布时间:2017-11-23 11:41:23

|

7469人浏览过

|

来源于php中文网

原创

padding是比较常用css样式,我们可以利用padding样式来设置内边距,下面我们从基础语法到应用示范最后举一个小列子来给大家说一下padding样式如何使用,

padding语法结构与说明  

padding : +数值+单位 或 百分比数值

div{padding:5px}设置对象距离四边边距为5px间隔

同时可以单独设置左、右、上、下边距离发布设置

立即学习前端免费学习笔记(深入)”;

1、padding-left 设置对象距离左边的边距补白间隔

div{padding-left:5px}

对象内距离左边补白间距为5px

2、padding-right 设置对象距离右边的边距补白间隔

div{padding-right:5px}

对象内距离右边补白间距为5px

3、padding-top 设置对象距离上边的边距补白间隔

div{padding-top:5px}

对象内距离上边补白间距为5px

4、padding-bottom 设置对象距离下边的边距补白间隔

div{padding-bottom:5px}

对象内距离下边补白间距为5px

div css Padding说明

检索或设置对象四边的补丁边距。

如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。

如果只提供一个,将用于全部的四条边。

如果提供两个,第一个用于上-下,第二个用于左-右。

如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。

内联对象要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute。

Padding的值不能为负值。

Padding位于对象(边框)以内,或这样说padding样式是位于对象内的内容区域与边框之间。

padding设置四边用法案例 

为了对padding用法进一步了解,我们设置一个对象分别设置4边不同的padding补白间距,并且设置对象CSS宽度,css 高度、CSS边框属性样式。为了便于观察padding存在,我们设置padding-left(左)为20px,padding-right(右)为30px,padding-top(上)为40px,padding-bottom(下)为50px。

1、padding案例CSS代码

.div{ width:350px; height:80px; border:1px solid #00F; 

padding-left:20px;padding-right:30px;padding-top:40px;padding-bottom:50px} 

 

2、案例HTML代码

padding使用案例
 

4、案例小结

padding用于对象内四边边框到内容区域间距设置样式,所以要实现对象内间隔可以使用css div + padding实现。

三、padding简写与案例

1、四边相同padding简写

如果padding四边设置值相同,假如为5px,原始表达方式:

padding-left:5px;padding-right:5px;padding-top:5px;padding-bottom:5px;

可以CSS简写为:

Veggie AI
Veggie AI

Veggie AI 是一款利用AI技术生成可控视频的在线工具

下载

padding:5px;

2、四边不同padding简写

就像我们第二点教程中四边不同padding值,padding-left:20px;padding-right:30px;padding-top:40px;padding-bottom:50px

我们可以简写为:

Padding:40px 30px 50px 20px;

注意每个数值后一个空格间隔隔开

解释分别意思

第一个40px代表“上”padding-top:40px;

第二个30px代表“右”padding-right:30px;

第三个50px代表“下”padding-bottom:50px;

第四个20px代表“左”padding-left:20px;

3、左右相同,上下不同值padding简写

假如padding左右为10px,上为20px,下为30px

一般写法:

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

简写可以为:

Padding:20px 10px 30px;

前者第一个20px代表padding-top上为20px,

第二个10px,代表padding-left和padding-right左右为10px

第三30px,代表padding-bottom:30px

4、三边相同,一边值不同

任意三边相同值,另外边不同我们仍然可以简写。

EXP

假如padding上左右为10px,下为20px,这个时候一般这样写CSS样式

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

简写为:

padding:10px;padding-bottom:20px

注意顺序不能颠倒,这里运用技巧是浏览器读取是从上到下,从左到右读取方式,所以我们可以先设置四边相同,后面加一个另外一边不同样式值即可。

扩展阅读:

1、html压缩优化

2、css压缩优化

3、css优化

4、css字间距

padding css总结

Padding样式是我们使用频率比较高的CSS样式属性,一般设置对象内上、下、左、右边距间隔我们就要用到padding,当然如果遇到开头文字缩进我们可以使用css text-indent样式。使用padding时候注意宽度增减,padding是要占用宽度和高度,如果总宽度为500px,左右设置了10px的padding样式,这样内容区域宽度就会变为480px。同时注意缩写PADDING样式时候代表意义,尽量适使用CSS缩写样

padding的使用方法就是这么多,更多精彩请关注php中文网其它相关文章!

相关阅读:

在HTML里p段落行高行距怎么设置

HTML5

html文档类型声明怎么写

相关专题

更多
云朵浏览器入口合集
云朵浏览器入口合集

本专题整合了云朵浏览器入口合集,阅读专题下面的文章了解更多详细地址。

0

2026.01.20

Java JVM 原理与性能调优实战
Java JVM 原理与性能调优实战

本专题系统讲解 Java 虚拟机(JVM)的核心工作原理与性能调优方法,包括 JVM 内存结构、对象创建与回收流程、垃圾回收器(Serial、CMS、G1、ZGC)对比分析、常见内存泄漏与性能瓶颈排查,以及 JVM 参数调优与监控工具(jstat、jmap、jvisualvm)的实战使用。通过真实案例,帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。

20

2026.01.20

PS使用蒙版相关教程
PS使用蒙版相关教程

本专题整合了ps使用蒙版相关教程,阅读专题下面的文章了解更多详细内容。

62

2026.01.19

java用途介绍
java用途介绍

本专题整合了java用途功能相关介绍,阅读专题下面的文章了解更多详细内容。

87

2026.01.19

java输出数组相关教程
java输出数组相关教程

本专题整合了java输出数组相关教程,阅读专题下面的文章了解更多详细内容。

39

2026.01.19

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

10

2026.01.19

xml格式相关教程
xml格式相关教程

本专题整合了xml格式相关教程汇总,阅读专题下面的文章了解更多详细内容。

13

2026.01.19

PHP WebSocket 实时通信开发
PHP WebSocket 实时通信开发

本专题系统讲解 PHP 在实时通信与长连接场景中的应用实践,涵盖 WebSocket 协议原理、服务端连接管理、消息推送机制、心跳检测、断线重连以及与前端的实时交互实现。通过聊天系统、实时通知等案例,帮助开发者掌握 使用 PHP 构建实时通信与推送服务的完整开发流程,适用于即时消息与高互动性应用场景。

19

2026.01.19

微信聊天记录删除恢复导出教程汇总
微信聊天记录删除恢复导出教程汇总

本专题整合了微信聊天记录相关教程大全,阅读专题下面的文章了解更多详细内容。

160

2026.01.18

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

CSS教程
CSS教程

共754课时 | 21.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号