【CSS】盒子模型内边距 ② ( 内边距复合写法 | 代码示例 )
创始人
2025-05-29 05:25:11
0次

文章目录

  • 一、内边距复合写法
    • 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 个值 : 设置 上下左右 内边距 ;


代码示例 :

 

     内边距测试


内边距测试

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

  • 盒子边框 宽度 240 像素 :

在这里插入图片描述

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

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

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

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

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

在这里插入图片描述

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


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


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


代码示例 :

 

     内边距测试


内边距测试

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

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

在这里插入图片描述

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


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


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


代码示例 :

 

     内边距测试


内边距测试

展示效果 :

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述


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


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


代码示例 :

 

     内边距测试


内边距测试

展示效果 :

在这里插入图片描述

F12 进入调试模式 ;

在这里插入图片描述

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

在这里插入图片描述

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：被清宫剧洗白的人都是哪些人 历史上的他们都是什么样的 清宫剧真实存在的人物 众多清宫剧的历史人物关系

下一篇：【C++笔试强训】第三十二天

相关内容

热门资讯

节约资源，保护环境,做保护地球... 　　保护环境，从身边做起　　人类自诞生起，一切衣食往行及生产，生活，无不依赖于我们所生存的这个星球，...
没有地球的健康就没有人类的健康... 　环境保护(简称环保)是在个人、组织或政府层面，为大自然和人类福祉而保护自然环境的行为，指人类为解决...
环保小知识，你需要知道！ 企业... 　1、节约用水　　随时关上水龙头，别让水白流;看见漏水的龙头一定要拧紧它。尽量使用二次水。例如，淘米...
保护水源就是保护生命 生命和水... 　我国是世界上12个贫水国家之一，淡水资源还不到世界人均水量的 1/4。全国600多个城市半数以上缺...
【BMS】电池包低温加热技术 1、目的： 提高锂电池低温充放电性能。（如电动车在寒冷天气续航变短、启动...
GeoWave 以下部分内容是翻译的。英文太烂，应该是很不准确的。 一、什么是GeoWave GeoW...
保护水源，保护生命，保护地球 ... 　我国是世界上12个贫水国家之一，淡水资源还不到世界人均水量的 1/4。全国600多个城市半数以上缺...
最新或2023（历届）学雷锋手... 【学雷锋手抄报内容：雷锋名言警句】　　1) 我愿永远做一个螺丝钉。　　2) 谁要是游戏人生，他就一事...
低碳生活，其实就是这么简单。 ... 这个月，我们学校开展了一个活动——绿色田园，节能环保小达人。其实我们家早就开展了一系列的环保行动。　...
最新或2023（历届）小学生学... 雷锋(1940～1962)　　中国人民解放军全心全意为人民服务的楷模，共产主义战士。湖南望城县人。1...
从小事做起，保护好赖以生存的地... 　谁都知道，地球是我们的家园，与我们的生活息息相关。人类大量破坏环境，已经把我们美丽的地球毁坏的不像...
基础入门 HTTP数据包Pos... 文章目录数据-方法&头部&状态码请求requestResponse状态码案例-文件探针&登录爆破工具...
【每日一题Day151】LC1... 执行操作后字典序最小的字符串【LC1625】 给你一个字符串 s 以及两个整数 a 和 b 。其中...
最新或2023（历届）小学生学... 【学习雷锋好榜样】　　学习雷锋好榜样　　忠于革命忠于党　　爱憎分明不忘本　　立场坚定斗志强　　立场坚...
最新或2023（历届）3月学雷... 【素材一：团结友爱】　　雷锋把自己的藏书拿出来供大家学习，被人们称为“小小的雷锋图书馆”。他帮助同志...
小学一年级学雷锋手抄报内容最新... 【学雷锋心得体会】　　三月是一个春光明媚、生机勃勃的季节，三月更是一个讲文明、树新风、发扬雷锋精神的...
最新或2023（历届）最新小学... 【关于雷锋的名言】　　1、我觉得一个革命者就应该把革命利益放在第一位，为党的事业贡献出自己的一切，这...
小学生最新或2023（历届）3... 　【学雷锋心得体会】　　“滴水只有放进大海才永远不会干涸，一个人只有当他把自己和事业融合在一起才能最...
cdn原理与应用 免费的ChatGPT镜像网站网页搜索技巧 | 西园公子的科研百宝箱 (zwjjiaozhu.top)...
最新或2023（历届）小学二年... 【雷锋的名言】　　1) 我愿永远做一个螺丝钉。　　2) 谁要是游戏人生，他就一事无成;谁不能主宰自己...