【CSS】盒子模型内边距 ① ( 内边距概念 | 内边距设置语法 | 内边距设置效果 | 代码示例 )

创始人

2025-05-29 04:28:49

0次

文章目录

一、内边距
- 1、概念
- 2、内边距设置语法
- 3、内边距设置效果
二、内边距代码示例
- 1、不设置边距的示例
- 2、设置边距的示例

一、内边距

1、概念

内边距是盒子的边框与内容之间的间隔长度 ;

下图中 , 中心 100 x 100 像素的是内容 , 内容外侧 , 边框内侧 , 就是内边距范围 ;

在这里插入图片描述

2、内边距设置语法

内边距设置语法 :

padding-left : 设置左内边距 ;
padding-top : 设置上内边距 ;
padding-right : 设置右内边距 ;
padding-bottom : 设置下内边距 ;

3、内边距设置效果

设置内边距效果 : 为盒子模型设置内边距 Padding 后 ,

在盒子内容与盒子边框中间 , 会产生一个内边距 ,
与此同时盒子模型的尺寸会变大 ;

二、内边距代码示例

1、不设置边距的示例

 

     内边距测试

内边距测试

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

使用标尺测量盒子模型的宽高都是 200 像素 ;

宽度 200 像素 :
高度 200 像素 :

在这里插入图片描述

2、设置边距的示例

为盒子模型设置左边距和上边距 , 代码为 :

 

     内边距测试

内边距测试

展示效果 :

在这里插入图片描述

使用标尺测量盒子模型的尺寸为 220 x 230 像素 ;

宽度 220 像素 :
高度 230 像素 :

在这里插入图片描述

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

上一篇：Docker概述

下一篇：HTTP 缓存的工作原理

相关内容

热门资讯

前端-session、jwt 目录：（1）session （2&#x...

linux入门---制作进度条了解缓冲区我们首先来看看下面的操作：我们首先创建了一个文件并在这个文件里面添加了...

关于测试，我发现了哪些新大陆关于测试平常也只是听说过一些关于测试的术语，但并没有使用过测试工具。偶然看到编程老师...

前缀和与对数器与二分法 1. 前缀和假设有一个数组，我们想大量频繁的去访问L到R这个区间的和，...

nodejs：本地安装nvm实... 一、背景-使用不同版本node的原因 vue3+ts、nuxt3版本，node...

JAVA集合知识整理 Java集合知识整理 HashMap相关 HashMap的底层数据结构：jdk1.8之...

无刷直流电机介绍及单片机控制实... 无刷直流电机介绍及单片机控制实例前言基本概念优势与劣势使用寿命基本结构使用单片机控制实例电子调速器&...

fwdiary(2) dp2 1.传纸条 AcWing 275. 传纸条 - AcWing 走两条路，走一条最大的...

常用的DOS命令常用的DOS命令 DOS（Disk Operating System，磁...

＜C++＞类和对象(下) 1.const成员函数将const修饰的“成员函数”称之为const成员函数，cons...