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

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

news 2025/7/7 21:20:32

文章目录

  • 一、内边距复合写法
    • 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

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2025/7/7 11:09:40

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

编程新知 2025/6/17 7:22:49

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2025/6/17 3:47:36

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2025/7/5 13:53:37

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2025/7/7 15:10:39

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2025/7/6 20:35:17

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

编程新知 2025/7/6 2:44:56

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2025/7/5 23:15:27

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

编程新知 2025/6/11 2:44:05

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

编程新知 2025/7/6 1:51:25