padding
时间:2021-10-11
本文章向大家介绍padding,主要包括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
原文地址:https://www.cnblogs.com/libo-web/p/15393972.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 算法集锦(24) | 自动驾驶 |高速公路行驶路径规划算法
- 【自动驾驶专题】|小白都会玩的自动驾驶算法
- 算法基础(6)| 语音识别DTW算法小讲
- Selenium设置浏览器为手机模式自定义大小
- 如何在Jetson nano上同时编译TensorRT与Paddle Lite框架
- 一文概览无监督聚类算法有多少 | 算法基础(10)
- 算法集锦(28)| 智能医疗 | 血液细胞分类算法
- 基于飞桨复现 CVPR2018 Relation Net的全程解析
- 如何将DB2数据库转换成Oracle数据库,这一篇告诉你
- MySQL 8.0 安装部署3个注意事项
- 打卡群刷题总结0802——反转链表 II
- 打卡群刷题总结0801——解码方法
- 动手写简单的嵌入式操作系统二
- C++核心准则E.6:使用RAII防止资源泄露
- C++核心准则E.12: 当不可能或不愿意通过抛出异常退出函数时使用noexcept