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

【CSS】盒子模型内边距 ② ( 内边距复合写法 | 代码示例 )

news 2026/4/2 6:32:38

文章目录

  • 一、内边距复合写法
    • 1、语法
    • 2、代码示例 - 设置 1 个值
    • 3、代码示例 - 设置 2 个值
    • 4、代码示例 - 设置 3 个值
    • 5、代码示例 - 设置 4 个值





一、内边距复合写法



1、语法


盒子模型内边距 可以通过

  • padding-left 左内边距
  • padding-right 右内边距
  • padding-top 上内边距
  • padding-bottom 下内边距

进行 分别设置 , 也可以通过 padding 属性进行复合实现 ;


padding 属性值设置 : 设置 1 ~ 4 个 值 , 单位 像素 px ;

  • 设置 1 个值 : 设置 上下左右 内边距 ;
  • 设置 2 个值 : 设置 上下、左右 内边距 ;
  • 设置 3 个值 : 设置 上、左右、下 内边距 ;
  • 设置 4 个值 : 设置 上、右、下、左 内边距 ;

2、代码示例 - 设置 1 个值


padding 属性设置 1 个值 : 设置 上下左右 内边距 ;


代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    <meta charset="UTF-8" /> <title>内边距测试</title><base target="_blank"/><style type="text/css">div {width: 200px;height: 200px;/* 设置边框 */border: 1px solid blue;/* 设置 上下左右 内边距 20px */padding: 20px;}</style>
</head>
<body><div>内边距测试</div>
</body>
</html>

展示效果 : 由 200 x 200 像素 变为 240 x 240 像素 ;
在这里插入图片描述
使用标尺进行测量 :

  • 盒子边框 宽度 240 像素 :

在这里插入图片描述

  • 盒子边框 高度 240 像素 :
    在这里插入图片描述

在浏览器中 , 按下 F12 进入调试模式 ;

使用 选择工具 , 将鼠标移动到 盒子模型 上方 , 会显示如下内容 ;

淡蓝色 是 盒子内容 的颜色 ;

青色 是 盒子内边距 的颜色 ;

在这里插入图片描述

右侧的 在这里插入图片描述 图 , 可以很明确的看出 , 盒子内容 , 内边距 , 边框 , 外边距 的轮廓 ;


3、代码示例 - 设置 2 个值


padding 属性设置 2 个值 : 设置 上下、左右 内边距 ;


代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    <meta charset="UTF-8" /> <title>内边距测试</title><base target="_blank"/><style type="text/css">div {width: 200px;height: 200px;/* 设置边框 */border: 1px solid blue;/* 设置 上下内边距 20px , 左右内边距 10px */padding: 20px 10px;}</style>
</head>
<body><div>内边距测试</div>
</body>
</html>

展示效果 :
在这里插入图片描述

F12 进入调试模式 , 查看盒子模型宽高 ;

在这里插入图片描述

由下图可知 , 盒子 宽度 220 像素 , 高度 240 像素 ;
在这里插入图片描述


4、代码示例 - 设置 3 个值


padding 属性设置 3 个值 : 设置 上、左右、下 内边距 ;


代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    <meta charset="UTF-8" /> <title>内边距测试</title><base target="_blank"/><style type="text/css">div {width: 200px;height: 200px;/* 设置边框 */border: 1px solid blue;/* 设置 上内边距 20px , 左右内边距 10px , 下内边距 30px */padding: 20px 10px 30px;}</style>
</head>
<body><div>内边距测试</div>
</body>
</html>

展示效果 :

在这里插入图片描述

在这里插入图片描述

盒子的宽高是 250 x 220 像素 ;

在这里插入图片描述


5、代码示例 - 设置 4 个值


padding 属性设置 4 个值 : 设置 上、右、下、左 内边距 ;


代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    <meta charset="UTF-8" /> <title>内边距测试</title><base target="_blank"/><style type="text/css">div {width: 200px;height: 200px;/* 设置边框 */border: 1px solid blue;/* 设置 上内边距 20px , 右内边距 10px , 下内边距 30px , 左内边距 50px */padding: 20px 10px 30px 50px;}</style>
</head>
<body><div>内边距测试</div>
</body>
</html>

展示效果 :

在这里插入图片描述

F12 进入调试模式 ;

在这里插入图片描述

盒子 宽度 260 像素 , 高度 250 像素 ;

在这里插入图片描述

相关文章：

【CSS】盒子模型内边距 ② ( 内边距复合写法 | 代码示例 )

文章目录一、内边距复合写法1、语法2、代码示例 - 设置 1 个值3、代码示例 - 设置 2 个值4、代码示例 - 设置 3 个值5、代码示例 - 设置 4 个值一、内边距复合写法 1、语法 盒子模型内边距 可以通过 padding-left 左内边距padding-right 右内边距padding-top 上内边距padding-…...

编程日记 2023/3/21 5:59:06

uni-app ——使用uploadFile上传多张图片

前言&#xff1a;最近的工作中出现了一个功能点&#xff0c;具体写法我在前面的文章中已经阐述过&#xff0c;不过之前的情况是上传图片调用后端的一个接口&#xff0c;整个表单页面提交的时候调用的是另一个接口&#xff0c;我也从中学到了另外的一种方法&#xff0c;写到这里…...

编程日记 2023/3/21 5:54:04

Linux - 进程控制(进程等待)

进程等待必要性之前讲过&#xff0c;子进程退出&#xff0c;父进程如果不管不顾&#xff0c;就可能造成‘僵尸进程’的问题&#xff0c;进而造成内存泄漏。另外&#xff0c;进程一旦变成僵尸状态&#xff0c;那就刀枪不入&#xff0c;“杀人不眨眼”的kill -9 也无能为力&#…...

编程日记 2023/3/21 5:49:00

Python 可视化最频繁使用的10大工具

今天介绍Python当中十大可视化工具&#xff0c;每一个都独具特色&#xff0c;惊艳一方。 文章目录Matplotlib技术提升SeabornPlotlyBokehAltairggplotHoloviewsPlotnineWordcloudNetworkxMatplotlib Matplotlib 是 Python 的一个绘图库&#xff0c;可以绘制出高质量的折线图、…...

编程日记 2023/4/13 6:57:12

Windows与Linux端口占用、查看的方法总结

Windows与Linux端口占用、查看的方法总结 文章目录Windows与Linux端口占用、查看的方法总结一、Windows1.1Windows查看所有的端口1.2查询指定的端口占用1.3查询PID对应的进程1.4查杀死/结束/终止进程二、Linux2.1lsof命令2.2netstat命令一、Windows 1.1Windows查看所有的端口 …...

编程日记 2023/3/21 5:38:57

48天强训 Day1 JavaOj

48天强训 & Day1 & JavaOj 1. 编程题1 - 组队竞赛 组队竞赛_牛客笔试题_牛客网 (nowcoder.com) 1.1 读题 1.2 算法思想基础 我们应该尽量的让每一个队伍的中间值都最大化~我们应该尽量的让每一个队伍的最小值都足够小~前33%的不应该都作为每个队伍的最大值~ 接下来…...

编程日记 2023/3/21 5:33:55

崩溃的一瞬间

——我可以忍受黑暗&#xff0c;除非我从未见过光明 原来&#xff0c;人真的会崩溃&#xff0c;如果不是昨夜的眼泪&#xff0c;我到现在还不知道人为什么会在一瞬间崩溃。 刚和认识不久的女孩子聊完天准备入睡。忽然想到自己可能过几个月就要离开这座待了仅一年多的城市…...

编程日记 2023/3/21 5:28:53

13回归网络：HTTP/2是怎样的网络协议？

本篇文章我们先放下实践，回归网络，深入gRPC底层的HTTP/2协议，去探究一下框架底层网络协议的原理，提升对高性能网络协议的认知，相信读完这篇文章以后，我们就可以了解HTTP/2有哪些优势，为什么gRPC要使用HTTP/2作为底层的传输协议。 在众多研究HTTP/2的博客和资料中，最具…...

编程日记 2023/3/21 5:23:51

CSS学习笔记——基础选择器，字体属性，文本属性，三种样式表

文章目录基础选择器标签选择器类选择器多类名使用方式id选择器通配符选择器字体属性字体系列字体字号字体粗细文字样式复合属性文本属性文本颜色对齐文本装饰文本文本缩进行间距CSS的三种样式表行内样式表&#xff08;行内式&#xff09;内部样式表&#xff08;嵌入式&#xff…...

编程日记 2023/3/21 5:18:49

第十四届蓝桥杯三月真题刷题训练——第 16 天

目录 第 1 题&#xff1a;英文字母 问题描述 输入格式 输出格式 样例输入 1 样例输出 1 样例输入 2 样例输出 2 评测用例规模与约定 运行限制 代码&#xff1a; 第 2 题&#xff1a;单词分析 题目描述 输入描述 输出描述 输入输出样例 运行限制 数组代码&…...

编程日记 2023/3/21 5:13:46

鸟哥的Linux私房菜 Shell脚本

第十二章、学习 Shell Scripts https://linux.vbird.org/linux_basic/centos7/0340bashshell-scripts.php 12.2 简单的 shell script 练习 #!/bin/bash# Program: # User inputs his first name and last name. Program shows his full name.read -p "Please in…...

编程日记 2023/4/13 6:57:40

FPGA基于RIFFA实现PCIE采集ov5640图像传输，提供工程源码和QT上位机

目录1、前言2、RIFFA理论基础3、设计思路和架构4、vivado工程详解5、上板调试验证并演示6、福利&#xff1a;工程代码的获取1、前言 PCIE是目前速率很高的外部板卡与CPU通信的方案之一&#xff0c;广泛应用于电脑主板与外部板卡的通讯&#xff0c;PCIE协议极其复杂&#xff0c…...

编程日记 2023/3/21 5:03:42

week13周报

一.动态规划走楼梯2难点&#xff1a;不能连续走三次两级台阶如何表示思路&#xff1a;可以用二维数组f[i][j],i表示当前台阶数&#xff0c;j表示已经连续走了j次二级台阶了转移方程&#xff1a;f[i2][j1]f[i2][j1]f[i][j] 当j&#xff01;2时&#xff0c;我们可以选择走二级台阶…...

编程日记 2023/3/21 4:58:40

离散选择模型中的分散系数theta到底该放在哪里呢？

前言 \quad~~一直都在想为啥子离散选择模型中分散系数以分母形式出现而在路径选择公式中以系数形式出现呢&#xff1f;看着公式想了想&#xff0c;现在想出了一个似乎感觉应该差不多很合理的答案&#xff0c;希望与大家一起探讨。 进入正题 根据随机效用理论&#xff0c;决策…...

编程日记 2023/3/21 4:53:38

【CSAPP】进程 | 上下文切换 | 用户视角下的并发进程

&#x1f4ad; 写在前面&#xff1a;本文将学习《深入理解计算机系统》的第六章 - 关于异常控制流和系统级 I/O 的 进程部分。CSAPP 是计算机科学经典教材《Computer Systems: A Programmers Perspective》的缩写&#xff0c;该教材由Randal E. Bryant和David R. OHallaron 合著…...

编程日记 2023/4/13 6:58:26

节流还在用JS吗？CSS也可以实现哦

函数节流是一个我们在项目开发中常用的优化手段&#xff0c;可以有效避免函数过于频繁的执行。一般函数节流用在scroll页面滚动&#xff0c;鼠标移动等。 为什么需要节流呢&#xff0c;因为触发一次事件就会执行一次事件&#xff0c;这样就形成了大量操作dom,会出现卡顿的情况…...

编程日记 2023/3/21 4:43:35

带你看看 TypeScript 5.0 的新特性

一、写在前面 TypeScript 5.0 已经于 2023 年 3 月 16 日发布了&#xff0c;带来了许多新功能&#xff0c;同时也在性能方面进行了优化&#xff0c;下面让我们来一起看看新版 TypeScript 中比较有重要的变化吧。 二、新特性 2-1、速度、包体积优化 首先是新版本性能的提升&…...

编程日记 2023/3/21 4:38:33

C语言预处理条件语句的 与或运算

C语言预处理条件语句的 与或运算 1.#ifdef 与或运算 #ifdef (MIN) && (MAX) ----------------------------错误使用 #if defined(MIN) && defined(MAX) ---------------- 正确使用 #ifdef (MIN) || (MAX) -----------------------------错误使用 …...

编程日记 2023/3/21 4:33:31

从零实现深度学习框架——学习率调整策略介绍

引言 本着“凡我不能创造的，我就不能理解”的思想，本系列文章会基于纯Python以及NumPy从零创建自己的深度学习框架，该框架类似PyTorch能实现自动求导。 要深入理解深度学习，从零开始创建的经验非常重要，从自己可以理解的角度出发，尽量不使用外部完备的框架前提下，实现我…...

编程日记 2023/3/21 4:28:30

系统架构：经典三层架构

引言 经典三层架构是分层架构中最原始最典型的分层模式&#xff0c;其他分层架构都是其变种或扩展&#xff0c;例如阿里的四层架构模式和DDD领域驱动模型。阿里的 四层架构模型在三层基础上增加了 Manager 层&#xff0c;从而形成变种四层模型&#xff1b;DDD架构则在顶层用户…...

编程日记 2023/3/21 4:23:27

你还在用for循环清洗CSV？Polars 2.0的scan_csv()+expression DSL已支持自动列式推断与零拷贝转换——立即升级避免被淘汰

第一章&#xff1a;Polars 2.0大规模数据清洗的核心范式变革Polars 2.0 不再将数据清洗视为一系列离散的、命令式的转换操作&#xff0c;而是以“惰性执行图列式语义优先”为基石&#xff0c;重构整个清洗生命周期。其核心变革体现在计算模型、内存管理与API设计三重维度的协同…...

编程新知 2026/4/2 6:32:31

【仅限内部技术白皮书泄露版】：某金融级Java协议解析引擎设计文档（吞吐量23.8万TPS，延迟＜1.2ms）

第一章&#xff1a;金融级Java协议解析引擎总体架构设计金融级Java协议解析引擎面向高频、低延时、强一致性的交易与清算场景&#xff0c;需在微秒级完成报文解析、字段校验、语义转换及路由分发。其总体架构采用分层解耦设计&#xff0c;兼顾可扩展性、可观测性与容灾能力&…...

编程新知 2026/4/2 6:28:29

丹青幻境·Z-Image Atelier部署教程：Docker Compose一键启停方案

丹青幻境Z-Image Atelier部署教程&#xff1a;Docker Compose一键启停方案 1. 学习目标与前置准备 本教程将手把手教你如何使用Docker Compose快速部署丹青幻境Z-Image Atelier数字艺术创作平台。通过本教程&#xff0c;你将学会&#xff1a; 如何在5分钟内完成环境搭建如何…...

编程新知 2026/4/2 5:43:51

Phi-3-mini-4k-instruct-gguf效果展示：温度0.0下100%一致性的制度类文本生成

Phi-3-mini-4k-instruct-gguf效果展示&#xff1a;温度0.0下100%一致性的制度类文本生成 1. 模型介绍与特点 Phi-3-mini-4k-instruct-gguf是微软推出的轻量级文本生成模型&#xff0c;属于Phi-3系列中的GGUF版本。这个模型特别适合需要稳定、一致输出的场景&#xff0c;尤其是…...

编程新知 2026/4/2 5:13:45

Termius Pro功能免费解锁指南：修改background-process.js实现永久订阅

Termius订阅机制解析与安全使用建议 Termius作为一款广受开发者欢迎的SSH客户端工具&#xff0c;其Pro版本提供了诸多实用功能。本文将深入探讨Termius的订阅验证机制工作原理&#xff0c;并从技术角度分析如何安全合规地使用该工具。 1. Termius订阅机制技术解析 Termius采用典…...

编程新知 2026/4/2 5:03:41

AI绘图小说配图批量生成 小说插图制作神器 小说配图 动漫图片生成 低配显卡可用 解决图片一致性的问题 生成的图片一致性 可控

简介说明 AI绘图小说配图批量生成 小说插图制作神器 小说配图 动漫图片生成 低配显卡可用 把常见的出图流程整理成更容易操作、更适合生产使用的工作台&#xff0c;且支持低配显卡稳定运行&#xff0c;无需升级硬件即可流畅出图。 它可以帮助用户把“启动服务、填写提示词、切…...

编程新知 2026/4/2 3:50:32

OpenClaw对话日志分析：Qwen3-14B挖掘用户真实需求

OpenClaw对话日志分析&#xff1a;Qwen3-14B挖掘用户真实需求 1. 为什么需要分析对话日志&#xff1f; 作为一个长期使用OpenClaw的开发者&#xff0c;我发现自己陷入了一个典型的技术陷阱&#xff1a;花大量时间开发新功能&#xff0c;却很少回头审视用户实际如何使用这些功…...

编程新知 2026/4/2 3:36:15

【限时开源】Polars 2.0清洗模板库V1.0发布：含金融时序对齐、电商ID映射、日志正则归一化等9大高复用Pipeline

第一章&#xff1a;Polars 2.0大规模数据清洗技巧入门到精通教程 Polars 2.0 是专为高性能、内存安全与并行计算设计的 DataFrame 库&#xff0c;其惰性执行引擎与零拷贝语义使其在处理 GB 级别结构化数据时显著优于 Pandas。本章聚焦真实场景下的数据清洗实践&#xff0c;涵盖…...

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

【应答器】基于matlab应答器特殊区段信息包报文编码仿真【含Matlab源码 15258期】

&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49e;欢迎来到海神之光博客之家&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49…...

编程新知 2026/4/2 1:16:08

STM32移植LVGL图形库实战指南

1. LVGL图形库概述与STM32移植价值LittlevGL&#xff08;简称LVGL&#xff09;作为当前最受欢迎的嵌入式开源图形库之一&#xff0c;其设计哲学完美契合了资源受限的嵌入式环境。我在多个STM32项目中采用LVGL后发现&#xff0c;相比传统GUI方案&#xff0c;它具有三个显著优势&…...

编程新知 2026/4/2 0:41:20