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

CSS基础中padding详解

news 2025/12/22 11:34:30

文章目录

  • 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

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2025/12/22 8:55:17

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2025/12/12 19:38:31

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

编程新知 2025/12/10 2:13:51

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

编程新知 2025/12/22 6:26:40

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

编程新知 2025/9/13 18:20:34

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...

编程新知 2025/10/17 2:32:49

【Linux】自动化构建-Make/Makefile

前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具&#xff1a;make/makfile 1.背景 在一个工程中源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;mak…...

编程新知 2025/12/22 8:44:34

协议转换利器，profinet转ethercat网关的两大派系，各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

编程新知 2025/12/20 22:09:28

水泥厂自动化升级利器：Devicenet转Modbus rtu协议转换网关

在水泥厂的生产流程中&#xff0c;工业自动化网关起着至关重要的作用&#xff0c;尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关&#xff0c;为水泥厂实现高效生产与精准控制提供了有力支持。 水泥厂设备众多&#xff0c;其中不少设备采用Devicenet协议。Devicen…...

编程新知 2025/12/20 20:47:52

消防一体化安全管控平台：构建消防“一张图”和APP统一管理

在城市的某个角落&#xff0c;一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延&#xff0c;滚滚浓烟弥漫开来&#xff0c;周围群众的生命财产安全受到严重威胁。就在这千钧一发之际&#xff0c;消防救援队伍迅速行动&#xff0c;而豪越科技消防一体化安全管控平台构建的消防“…...

编程新知 2025/12/18 4:38:22