当前位置： 首页 > news >正文

CSS基础中padding详解

news 文章来源：https://blog.csdn.net/NiNg_1_234/article/details/142794277 2025/5/24 5:25:36

文章目录

  • CSS基础中padding详解
    • 一、引言
    • 二、Padding基础
      • 1、Padding属性
        • 1.1、Padding的四个方向
      • 2、Padding的值类型
      • 3、代码示例
    • 三、Padding简写方法
      • 1、简写顺序
      • 2、简写规则
      • 3、代码示例
    • 四、Padding对元素大小的影响
      • 1、解决方案
        • 1.1、Box-sizing属性
        • 1.2、计算实际宽度
    • 五、总结

CSS基础中padding详解

一、引言

在CSS布局中，padding属性是控制元素内容与其边框之间距离的关键工具。它不仅影响元素的视觉效果，还对布局的灵活性起着决定性作用。本文将深入探讨padding的用法及其对元素尺寸的影响。

二、Padding基础

1、Padding属性

padding属性用于设置元素的内边距，包括上（top）、右（right）、下（bottom）、左（left）四个方向。通过调整这些值，我们可以控制元素内容与边框之间的空间。

1.1、Padding的四个方向
  • padding-top：元素顶部内边距
  • padding-right：元素右侧内边距
  • padding-bottom：元素底部内边距
  • padding-left：元素左侧内边距

2、Padding的值类型

Padding的值可以是以下几种类型：

  • 长度值：像素（px）、百分比（%）、em、rem等
  • inherit：继承父元素的padding值

注意：padding不允许负值。

3、代码示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Padding Example</title><style>.box {width: 200px;height: 200px;background-color: #f0f;margin-bottom: 20px;}.example1 {padding-top: 30px;}.example2 {padding-right: 60px;}.example3 {padding-bottom: 90px;}.example4 {padding-left: 1000px;}</style>
</head>
<body><div class="box example1">Padding Top</div><div class="box example2">Padding Right</div><div class="box example3">Padding Bottom</div><div class="box example4">Padding Left</div>
</body>
</html>

三、Padding简写方法

为了简化代码，CSS提供了padding的简写方法，可以一次性设置四个方向的padding值。

1、简写顺序

简写顺序为：上、右、下、左。

2、简写规则

  • 一个值：所有方向使用相同值
  • 两个值：第一个值用于上/下，第二个值用于左/右
  • 三个值：第一个值用于上，第二个值用于左右，第三个值用于下
  • 四个值：分别用于上、右、下、左

3、代码示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Padding简写示例</title><style>.box1 {width: 200px;height: 100px;background-color: lightblue;padding: 30px; /* 一个值 */}.box2 {width: 200px;height: 100px;background-color: lightcoral;padding: 20px 40px; /* 两个值 */}.box3 {width: 200px;height: 100px;background-color: lightgreen;padding: 10px 20px 30px; /* 三个值 */}.box4 {width: 200px;height: 100px;background-color: lightskyblue;padding: 5px 10px 15px 20px; /* 四个值 */}</style>
</head>
<body><div class="box1">一个值：所有方向都使用30px的padding</div><div class="box2">两个值：上下20px，左右40px的padding</div><div class="box3">三个值：上10px，左右20px，下30px的padding</div><div class="box4">四个值：上5px，右10px，下15px，左20px的padding</div>
</body>
</html>

四、Padding对元素大小的影响

设置padding会增加元素的总尺寸，因为它在内容区域周围添加了空间。例如，一个宽高为200px的元素，如果设置了20px的左右padding和30px的上下padding，其总宽度会变为240px，总高度变为260px。

1、解决方案

1.1、Box-sizing属性

使用box-sizing: border-box;可以让元素的宽度包括padding和border，而不会影响元素的实际宽度。

.box {width: 200px;height: 200px;background-color: #f0f;margin-bottom: 20px;box-sizing: border-box;
}
1.2、计算实际宽度

如果不使用box-sizing: border-box;，则需要手动计算实际的宽度，包括padding在内。

.box {width: 200px; /* 总宽度 */padding: 20px;
}

五、总结

通过本文的介绍，我们深入了解了padding的基本概念、简写方法以及它对元素尺寸的影响。掌握这些知识，可以帮助我们在布局设计中更加灵活和精确地控制元素的显示效果。

版权声明：本博客内容为原创，转载请保留原文链接及作者信息。

参考文章：

  • CSS基础：最详细 padding的 4 种用法解析

相关文章：

CSS基础中padding详解

文章目录 CSS基础中padding详解一、引言二、Padding基础1、Padding属性1.1、Padding的四个方向 2、Padding的值类型3、代码示例 三、Padding简写方法1、简写顺序2、简写规则3、代码示例 四、Padding对元素大小的影响1、解决方案1.1、Box-sizing属性1.2、计算实际宽度 五、总结 …...

编程日记 2024/10/9 22:15:43

OpenGL笔记十九之相机系统

OpenGL笔记十九之相机系统 —— 2024-10-02 晚上 bilibili赵新政老师的教程看后笔记 code review! 文章目录 OpenGL笔记十九之相机系统1.运行1.1.游戏相机1.2.轨迹球相机 2.游戏相机与轨迹球相机切换3.博主笔记本要运行需要更改的文件更改1:28_OpenGL_CameraSystem/applicat…...

编程日记 2024/10/9 22:13:40

P-Tuning v2：一种普遍有效的提示调整方法

人工智能咨询培训老师叶梓 转载标明出处 预训练语言模型通过微调&#xff08;fine-tuning&#xff09;来适应特定任务虽然效果显著&#xff0c;但存在训练成本高、参数存储量大等问题。为了解决这些问题&#xff0c;清华大学的研究者们提出了一种名为P-Tuning v2的提示调整&am…...

编程日记 2024/10/9 22:11:38

微信小程序启动不起来，报错凡是以~/包名/*.js路径的文件，都找不到，试过网上一切方法，最终居然这么解决的，【避坑】命运的齿轮开始转动

app.json "resolveAlias": {"~/*": "/*"},文件代码也没有问题&#xff0c;网上的方法试过来了&#xff0c;大模型AI也问过遍&#xff0c;熬夜到凌晨2点半&#xff0c;最不可思议的是居然是因为微信开发者工具版本的问题&#xff0c;我真的是笑死…...

编程日记 2024/10/9 22:10:34

C#串口温度读取

背景&#xff1a;每天学点&#xff0c;坚持 要安装好虚拟串口和modbus poll&#xff0c;方便调试&#xff08;相关资源在文末&#xff0c;也可以私信找我要&#xff09; 传感器部分使用的是达林科技的DL11B-MC-D1&#xff0c;当时42软妹币买的&#xff08;官网上面有这个传感…...

编程日记 2024/10/9 22:09:33

2.5 Spring Boot整合Spring MVC框架

今天&#xff0c;我将向大家介绍如何在Spring Boot中整合Spring MVC框架&#xff0c;并展示如何创建和测试控制层&#xff08;Controller&#xff09;。 首先&#xff0c;让我们简要回顾一下Spring MVC。Spring MVC是一个基于Servlet的MVC框架&#xff0c;它简单、侵入性小&am…...

编程日记 2024/10/9 22:06:30

Java 归并排序

归并排序&#xff08;Merge Sort&#xff09;是一种基于分治法的排序算法。它将一个大数组分成两个较小的子数组&#xff0c;分别对每个子数组进行排序&#xff0c;然后再将这两个已排序的子数组合并成一个完整的已排序数组。归并排序的时间复杂度为 O(n log n)&#xff0c;其中…...

编程日记 2024/10/9 22:05:28

20241008深度学习动手篇

文章目录 1.如何写一个神经网络进行训练?1.1创建一个子类,搭建你需要的神经网络结构1.2 加载数据集1.3 自定义一些指标评估函数1.4训练1.5 结果展示 2.参考文献 1.如何写一个神经网络进行训练? 1.1创建一个子类,搭建你需要的神经网络结构 # File: 241008LeNet.py # Author:…...

编程日记 2024/10/9 22:03:26

对序列化反序列化在项目中的使用优化

文章目录 序列化是什么&#xff1f;常见的序列化协议使用序列化反序列化序列化List反序列化List 查看源码&#xff0c;分析不足进行改善 序列化是什么&#xff1f; 如果我们需要持久化 Java 对象比如将 Java 对象保存在文件中&#xff0c;或者在网络传输 Java 对象&#xff0c…...

编程日记 2024/10/9 22:02:25

查看 git log的过程中看到 :说明日志输出可能超出屏幕大小，系统进入了分页模式

在命令行提示符中&#xff0c;通常 : 表示系统等待进一步的输入。如果你在查看 git log 的过程中看到 :&#xff0c;说明日志输出可能超出屏幕大小&#xff0c;系统进入了分页模式&#xff0c;默认使用 less 命令查看内容。 此时你可以&#xff1a; 按 q 退出日志查看。按 En…...

编程日记 2024/10/9 22:01:24

Linux--信号量详解

目录 一、信号量 1、信号量相关函数 2、多线程环形队列生产消费模型 3、实现代码 信号量是将整体的资源分割成多份使用 信号量本质是对资源的预定机制 一、信号量 1、信号量相关函数 创建信号量: sem_init: int sem_init(sem_t *sem, int pshared, unsigned int value); …...

编程日记 2024/10/9 22:00:22

【重学 MySQL】五十一、更新和删除数据

【重学 MySQL】五十一、更新和删除数据 更新数据删除数据注意事项 在MySQL中&#xff0c;更新和删除数据是数据库管理的基本操作。 更新数据 为了更新&#xff08;修改&#xff09;表中的数据&#xff0c;可使用UPDATE语句。UPDATE语句的基本语法如下&#xff1a; UPDATE ta…...

编程日记 2024/10/9 21:59:21

Web3与人工智能的交叉应用探索

随着数字技术的发展&#xff0c;Web3与人工智能&#xff08;AI&#xff09;之间的结合正逐渐成为一个重要的研究领域。Web3技术旨在实现更加去中心化和透明的互联网&#xff0c;而人工智能则在数据分析、自动化决策和增强人类能力方面展示了巨大的潜力。 1. 去中心化数据管理与…...

编程日记 2024/10/9 21:57:12

【springboot9736】基于springboot+vue的逍遥大药房管理系统

作者主页&#xff1a;Java码库 主营内容&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。 收藏点赞不迷路 关注作者有好处 文末获取源码 项目描述 伴随着全球信息化发展&#xff0c;行行业业都与计算机技…...

编程日记 2024/10/9 21:56:11

四．网络层（上）

目录 4.1网络层功能概述 4.2 SDN基本概念 4.3 路由算法与路由协议 4.3.1什么是路由协议&#xff1f; 4.3.2什么是路由算法&#xff1f; 4.3.3路由算法分类 (1)静态路由算法 (2)动态路由算法 ①全局性 OSPF协议与链路状态算法 ②分散性 RIP协议与距离向量算法 4.3.…...

编程日记 2024/10/9 21:54:08

Leecode热题100-56.合并区间

以数组 intervals 表示若干个区间的集合&#xff0c;其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间&#xff0c;并返回 一个不重叠的区间数组&#xff0c;该数组需恰好覆盖输入中的所有区间 。 示例 1&#xff1a; 输入&#xff1a;intervals [[1,3…...

编程日记 2024/10/9 21:52:05

安全帽未佩戴预警系统 劳保防护用品穿戴监测系统 YOLO

在建筑、矿山、电力等高危行业中&#xff0c;工人面临着各种潜在的危险&#xff0c;如高空坠物、物体打击等。安全帽能够有效地分散和吸收冲击力&#xff0c;大大降低头部受伤的严重程度。一旦工人未正确佩戴安全帽&#xff0c;在遭遇危险时&#xff0c;头部将直接暴露在危险之…...

编程日记 2024/10/9 21:51:04

【python机器学习】线性回归 拟合 欠拟合与过拟合 以及波士顿房价预估案例

文章目录 线性回归之波士顿房价预测案例 欠拟合与过拟合线性回归API 介绍:波士顿房价预测数据属性:机器学习代码实现 拟合 过拟合 欠拟合 模拟 及处理方法(正则化处理)导包定义函数表示欠拟合定义函数表示拟合定义函数表示过拟合 正则化处理过拟合L1正则化L2正则化 线性回归之波…...

编程日记 2024/10/9 21:50:03

IT招聘乱象的全面分析

近年来&#xff0c;IT行业的招聘要求似乎越来越苛刻&#xff0c;甚至有些不切实际。许多企业在招聘时&#xff0c;不仅要求前端工程师具备UI设计能力&#xff0c;还希望后端工程师精通K8S服务器运维&#xff0c;更有甚至希望研发经理掌握所有前后端框架和最新开发技术。这种招聘…...

编程日记 2024/10/9 21:48:00

一入递归深似海，算法之美无止境

最近在刷leetcode hot100,在写二叉树中最大路径和的时候,看到了一个佬对递归的理解,深受启发,感觉自己对于递归的题又行了!!! 这里给大家分享一下(建立大家先去尝试一下这道题再来看 124. 二叉树中的最大路径和 二叉树中的 路径 被定义为一条节点序列&#xff0c;序列中每…...

编程日记 2024/10/9 21:46:59

进程的状态的理解（概念+Linux）

文章目录 进程的状态并行和并发物理和逻辑 时间片进程具有独立性等待的本质运行阻塞标记挂起等待 Linux下的进程状态&#xff08;一&#xff09;运行状态&#xff08;R - running&#xff09;&#xff08;二&#xff09;睡眠状态&#xff08;S - sleeping&#xff09;&#xff…...

编程日记 2024/10/9 21:45:57

Apache Linkis + OceanBase：如何提升数据分析效率

计算中间件 Apache Linkis 构建了一个计算中间件层&#xff0c;以实现上层应用程序和底层数据引擎之间的连接、治理和编排。目前&#xff0c;已经支持通过数据源的功能&#xff0c;实现用户通过Linkis 对接并使用 OceanBase数据库。 本文详细阐述了在 Apache Linkis v1.3.2中&a…...

编程日记 2024/10/9 21:43:54

Day01-postgresql数据库基础入门培训

Day01-postgresql数据库基础入门培训 1、PostgresQL数据库简介2、PostgreSQL行业生态应用3、PostgreSQL版本发展与特性4、PostgreSQL体系结构介绍5、PostgreSQL与MySQL的区别6、PostgreSQL与Oracle、MySQL的对比 1、PostgresQL数据库简介 PostgreSQL【简称&#xff1a;PG】是加…...

编程日记 2024/10/9 21:39:49

打卡第四天 P1081 [NOIP2012 提高组] 开车旅行

今天是我打卡第四天&#xff0c;做个省选/NOI−题吧(#^.^#) 原题链接&#xff1a;[NOIP2012 提高组] 开车旅行 - 洛谷 题目描述 输入格式 输出格式 输入输出样例 输入 #1 4 2 3 1 4 3 4 1 3 2 3 3 3 4 3 输出 #1 1 1 1 2 0 0 0 0 0 输入 #2 10 4 5 6 1 …...

编程日记 2024/10/9 21:37:45

Jenkins Pipline流水线

提到 CI 工具&#xff0c;首先想到的就是“CI 界”的大佬--]enkjns,虽然在云原生爆发的年代,蹦出来了很多云原生的 CI 工具,但是都不足以撼动 Jenkins 的地位。在企业中对于持续集成、持续部署的需求非常多,并且也会经常有-些比较复杂的需求,此时新生的 CI 工具不足以支撑这些很…...

编程日记 2024/10/9 21:36:44

鸿蒙harmonyos next flutter混合开发之开发FFI plugin

创建FFI plugin summation&#xff0c;默认创建的FFI plugin是求两个数的和 flutter create --templateplugin_ffi summation --platformsandroid,ios,ohos 创建my_application flutter create --org com.example my_application 在my_application项目中文件pubspec.yaml引…...

编程日记 2024/10/9 21:34:40

oracle数据库安装和配置

Oracle数据库安装 一、安装前的准备 系统要求&#xff1a; 硬件&#xff1a;内存至少1GB&#xff08;推荐2GB以上&#xff09;&#xff0c;硬盘至少10GB的可用空间&#xff0c;CPU至少2核心。 操作系统&#xff1a;支持Oracle版本的Windows&#xff08;如Windows 10或更高版本…...

编程日记 2024/10/9 21:33:38

猫玖破密啦

题目&#xff1a; 终究还是猫哥:3d5a3a0cfff7fb2e29194c0b7a89f284ff19a8 玖离&#xff1a;收到消息Oh,what_is_the_flag 玖离:7468655f666c61675f69735f666c13556d2cf2faec1e2d0f330b7dcceea1c62cb2 终究还是猫哥&#xff1a;收到消息************************************ 已…...

编程日记 2024/10/9 21:30:34

SpringBoot框架：服装生产管理的现代化工具

摘 要 本协力服装厂服装生产管理系统设计目标是实现协力服装厂服装生产的信息化管理&#xff0c;提高管理效率&#xff0c;使得协力服装厂服装生产管理作规范化、科学化、高效化。 本文重点阐述了协力服装厂服装生产管理系统的开发过程&#xff0c;以实际运用为开发背景&#…...

编程日记 2024/10/9 21:29:32

Android Preference的使用以及解析

简单使用 values.arrays.xml <?xml version"1.0" encoding"utf-8"?> <resources><string-array name"list_entries"><item>Option 1</item><item>Option 2</item><item>Option 3</item&…...

编程日记 2024/10/9 21:27:30