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

CSS基础中padding详解

news 2026/2/8 21:19:45

文章目录

  • 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

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/11/30 16:55:29

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

编程新知 2026/2/7 10:59:19

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/10/25 7:51:48

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2026/1/29 17:56:19

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

编程新知 2026/1/20 21:59:36

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

编程新知 2026/1/26 2:48:53

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

编程新知 2026/1/31 13:13:28

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

编程新知 2026/1/31 4:37:53

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

编程新知 2025/9/30 8:10:20