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

CSS基础中padding详解

news 2025/7/16 20:29:39

文章目录

  • 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

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2025/7/16 12:42:22

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

编程新知 2025/7/15 21:38:30

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2025/7/15 0:56:39

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

编程新知 2025/7/13 11:49:33

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2025/7/1 6:09:06

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

编程新知 2025/7/15 4:44:55

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2025/7/15 18:20:27

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

编程新知 2025/7/5 16:03:22

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

编程新知 2025/6/21 10:27:51

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2025/6/17 12:13:20