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

CSS基础中padding详解

news 2026/4/2 3:25:33

文章目录

  • 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

小白必看：霜儿-汉服-造相Z-Turbo从部署到出图全流程解析

小白必看&#xff1a;霜儿-汉服-造相Z-Turbo从部署到出图全流程解析 1. 镜像简介与核心优势 霜儿-汉服-造相Z-Turbo是一款专为汉服写真生成优化的AI模型镜像&#xff0c;基于Xinference框架部署&#xff0c;通过Gradio提供简洁易用的Web界面。与通用文生图模型相比&#xff0…...

编程新知 2026/4/2 3:11:30

OpenClaw安全加固指南：Phi-3-vision本地化部署的权限控制

OpenClaw安全加固指南&#xff1a;Phi-3-vision本地化部署的权限控制 1. 为什么需要安全加固&#xff1f; 上周我在调试一个自动处理发票的OpenClaw流程时&#xff0c;差点酿成大祸。这个流程需要读取财务部门的加密压缩包&#xff0c;解压后提取PDF发票进行OCR识别&#xff…...

编程新知 2026/4/2 2:41:04

数字IC时序约束实战：深入解析clock_uncertainty的设置策略与后端影响

1. 时钟不确定度的本质与组成 刚入行数字IC设计时&#xff0c;我最头疼的就是时序约束里那些看似相似却又微妙差别的概念。记得第一次看到clock_uncertainty这个参数&#xff0c;我盯着综合报告里的红色违例发了半小时呆。后来才明白&#xff0c;这个参数就像给时钟信号加了&qu…...

编程新知 2026/4/2 2:32:52

S03TodoWrite - 任务规划：没有计划的 Agent 会迷失方向

核心理念 “没有计划的 Agent 走哪算哪” – 先列步骤再动手&#xff0c;完成率翻倍。 源码&#xff1a;https://github.com/xiayongchao/learn-claude-code-4j/blob/main/src/main/java/org/jc/agents/S03TodoWrite.java原版&#xff1a;https://github.com/shareAI-lab/lea…...

编程新知 2026/4/2 1:40:13

高效医学知识图谱构建方案：CMeKG工具自动化处理中文医学文本技术深度解析

高效医学知识图谱构建方案&#xff1a;CMeKG工具自动化处理中文医学文本技术深度解析 【免费下载链接】CMeKG_tools 项目地址: https://gitcode.com/gh_mirrors/cm/CMeKG_tools 在医疗信息化与人工智能深度融合的今天&#xff0c;中文医学知识图谱构建面临严峻的技术挑…...

编程新知 2026/4/2 1:10:01

ML.NET + 1-bit LLM：在 C# 上位机实现仅 1GB 内存的本地 AI 推理

文章目录上位机程序员的内存焦虑&#xff0c;谁懂啊1-bit LLM是个啥&#xff1f;把模型"压缩裤"穿到极致ML.NET&#xff1a;被遗忘的.NET AI利器实战&#xff1a;把BitNet塞进你的上位机路子一&#xff1a;ONNX Runtime桥梁&#xff08;最正统&#xff09;路子二&…...

编程新知 2026/4/2 0:37:07

浅谈MIKEURBAN计算进度条停止的解决方法

01 问题昨天晚上&#xff0c;一个同事拿着笔记本对着我说&#xff0c;为什么我的MIKE URBAN计算进度条一直停滞在5%&#xff0c;停止了。我说是不是兼容问题&#xff0c;要不重新安装下软件吧。最终还是很感谢某同事找到了解决方法。02 解决方法MIKE URBAN低版本的通常分为了32…...

编程新知 2026/4/1 23:11:59

ESP32-S3实战指南：SPI多设备管理与高效数据传输

1. ESP32-S3的SPI总线基础认知 第一次接触ESP32-S3的SPI总线时&#xff0c;我完全被各种专业术语搞懵了。后来在实际项目中反复折腾才发现&#xff0c;SPI本质上就是个"快递小哥"&#xff0c;负责在芯片和外围设备之间搬运数据。ESP32-S3内置了4个这样的"快递站…...

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

终极指南：3步打造你的闲鱼AI客服机器人，实现24小时自动化值守

终极指南&#xff1a;3步打造你的闲鱼AI客服机器人&#xff0c;实现24小时自动化值守 【免费下载链接】XianyuAutoAgent 智能闲鱼客服机器人系统&#xff1a;专为闲鱼平台打造的AI值守解决方案&#xff0c;实现闲鱼平台724小时自动化值守&#xff0c;支持多专家协同决策、智能议…...

编程新知 2026/4/1 22:31:24

3步搞定黑苹果配置：OpCore-Simplify自动化工具如何解决90%的安装难题

3步搞定黑苹果配置&#xff1a;OpCore-Simplify自动化工具如何解决90%的安装难题 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 开篇&#xff1a;黑苹…...

编程新知 2026/4/1 21:58:52