html 内外边距区别以及解释

引入:

我们在之前的学习中学习了边框,我们发现只要是页面的标签元素,都可以实现边框的效果,那么接下来我们来讲解一个比较重要的知识点,边距,边距分为内边距和外边距,它们和边框一起是我们后面学习盒子模型的重要基础。

一、内边距(padding)

padding:内边距, 是指 :边框与内容之间的距离。

属性作用
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距

后面跟几个数值表示的意思是不一样的;

值的个数表达意思
1个值padding: 3px;上下左右都是3像素
2个值padding: 3px 5px; 表示 上下3像素 左右 5像素
3个值padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4个值padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针

代码演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>CSS3制作3D图片立方体旋转特效</title><style type="text/css">selector {padding: 15px;  /* 设置四个内边距为相同的值 */padding-top: 10px;  /* 设置上内边距的值 */padding-right: 5px; /* 设置右内边距的值 */padding-bottom: 20px; /* 设置下内边距的值 */padding-left: 10px; /* 设置左内边距的值 */}</style>
</head>
<body>

二、外边距(margin)

属性作用
margin外边距, 设置外边距会在元素之间创建“空白”, 这段空白通常不能放置其他内容。
margin-top上外边距
margin-right右外边距
margin-bottom下外边距
margin-left左外边距
margin:上外边距 右外边距  下外边距  左外边

取值顺序跟内边距相同。
代码演示:

<html lang="en">
<head><meta charset="utf-8"><title></title><style type="text/css">selector {margin: 20px;  /* 设置四个外边距为相同的值 */margin-top: 15px;  /* 设置上外边距的值 */margin-right: 10px; /* 设置右外边距的值 */margin-bottom: 5px; /* 设置下外边距的值 */margin-left: 5px; /* 设置左外边距的值 */margin: auto; /* 居中布局 */}</style>
</head>
<body>
</body>
</html>

3.内边距与外边距的区别:

内边距 (padding):内边距是元素内容与元素边界之间的空间。如果你给元素添加背景色,内边距的部分也会被背景色覆盖。换句话说,内边距是元素的一部分,改变内边距可以改变元素的大小。

外边距 (margin):外边距是元素边界与周围元素之间的空间。它存在于元素的外部,与元素的背景色无关。外边距主要用来控制元素与其周围元素的距离。

##4. 内外边距总结

在使用内外边距时,需要注意以下几点:

  1. 内边距和外边距都可以使用负值。

  2. 当两个相邻元素之间存在外边距时,会发生外边距重叠。外边距重叠时,重叠的外边距取决于具体情况,通常是取两个相邻元素中较大的外边距。

  3. 内边距可以为元素增加额外的尺寸,但不会改变元素的大小;外边距会增加元素的总尺寸,可能会影响元素的位置。

  4. 在实现水平居中和垂直居中时,内外边距是非常有用的,可以节省很多复杂的布局代码。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/236887.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mybatis配置-映射器(mappers)

现在&#xff0c;我们已经配置了MyBatis的行为&#xff0c;准备定义我们的映射SQL语句。但首先&#xff0c;我们需要告诉MyBatis在哪里找到它们。在这方面&#xff0c;Java并没有提供很好的自动发现机制&#xff0c;所以最好的方法是直接告诉MyBatis在哪里找到映射文件。 您可以…

【delphi11】delphi基础探索【三、基础组件和事件】

目录 基础组件 1. TButton&#xff08;按钮&#xff09; 2. TLabel&#xff08;标签&#xff09; 3. TEdit&#xff08;编辑框&#xff09; 4. TMemo&#xff08;多行编辑框&#xff09; 5. TComboBox&#xff08;组合框&#xff09; 6. TCheckBox&#xff08;复选框&…

PSP - 蛋白质与蛋白质的扩散对接 DiffDock-PP 算法

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/135115528 DiffDock-PP is a new approach to rigid-body protein-protein docking that is based on a diffusion generative model that learns…

PHP数据格式化加,加‘‘引号处理

原数据格式: ABC20231217043116afj6J0I6WV ABC20231217043116dlSyOB5Tvx ABC202312170431166EbL7BbYOm ABC20231217043116troQuaKWzw ABC20231217043116o7ZELjjF7E ABC20231217043122FFp1CSPLQ2 ABC20231217043133uJIBKil3bC ABC202312170431337z4bZwGJVS ABC20231217043133fi…

软件工程快速复习(期末急救)

每个同学要假想自己是一个项目经理&#xff0c;去完成一个软件项目&#xff0c;比如医院管理系统&#xff0c;自动设备控制系统等&#xff0c;以面向结构的软件工程方法&#xff0c;说出完成项目的步骤&#xff0c;涉及到的具体技术。初步了解面向对象的方法的与面向结构的方法…

【java】java学习笔记

1. 快速入门 // Hello类 public class Hello {// main方法public static void main(String[] args) {System.out.println("hello world!");} } 在控制台输入以下命令&#xff0c;对.java文件&#xff08;源文件&#xff09;进行编译操作&#xff0c;生成Hello.clas…

每日一题,二维平面

给你 二维 平面上两个 由直线构成且边与坐标轴平行/垂直 的矩形&#xff0c;请你计算并返回两个矩形覆盖的总面积。 每个矩形由其 左下 顶点和 右上 顶点坐标表示&#xff1a; 第一个矩形由其左下顶点 (ax1, ay1) 和右上顶点 (ax2, ay2) 定义。 第二个矩形由其左下顶点 (bx1, …

初学gitrepo的种种

经过各种折腾之后&#xff0c;发现git其实还是很简单的&#xff1b; 首先你需要两台机器&#xff0c;一台作为服务器&#xff0c;一台作为开发机器&#xff0c;开发机器从服务器上拉取代码。 目 目录 git建仓 开发机器拉取代码 初始化仓代码 repo管理 repo工具的下载 …

汽车制造厂设备故障预测与健康管理PHM

在现代汽车制造工业中&#xff0c;设备的可靠性和稳定性对于保证生产线的高效运行至关重要。为了提高生产效率、降低维修成本以及确保产品质量&#xff0c;汽车制造厂逐渐采用设备故障预测与健康管理&#xff08;PHM&#xff09;系统&#xff0c;以实现对设备状态的实时监测和预…

算法基础之快速幂求逆元

快速幂求逆元 核心思想&#xff1a; 逆元&#xff1a; 逆元 ap-2 mod p #include<iostream>#include<algorithm>using namespace std;typedef long long LL;LL pmi(int a,int b,int c){LL res 1;while(b){if(b & 1) res res * a %c;b >> 1;a (LL)…

Jenkins的文档翻译

官网Jenkins.io Jenkins用户文档 欢迎来到Jenkins用户文档-为那些想要使用Jenkins的现有功能和插件特性的人。如果你想通过开发自己的Jenkins插件来扩展Jenkins的功能&#xff0c;请参考extend Jenkins(开发者文档)。 詹金斯是什么? Jenkins是一个独立的、开源的自动化服务…

第七节TypeScript 循环

1、简述 有的时候&#xff0c;我们可能需要多次执行同一块代码。一般情况下&#xff0c;语句是按顺序执行的&#xff1a;函数中的第一个语句先执行&#xff0c;接着是第二个语句&#xff0c;依此类推。 循环语句允许我们多次执行一个语句或语句组。 循环语句流程图&#xff…

python学习笔记--异常捕获

异常场景 numinput("input you number:") n9000 try:resultn/int(num)print({} 除以num 结果为{}.format(n,result)) except ZeroDivisionError as err:print("0不可以作为除数&#xff0c;出现报错{}".format(err)) except ValueError as err:print(&quo…

【lesson21】MySQL复合查询(2)子查询

文章目录 子查询测试要用到的表测试要用到的数据单行子查询案例 多行子查询案例 多列子查询案例 在from子句中使用子查询案例 合并查询union案例union all案例 子查询 子查询是指嵌入在其他sql语句中的select语句&#xff0c;也叫嵌套查询 测试要用到的表 测试要用到的数据 单…

坚持提升这个能力,让你越来越强大

哈喽&#xff0c;你好啊&#xff01;我是雷工。 今天在读《张一鸣管理日志》时&#xff0c;看到这么一句话&#xff1a; “产品创新要从根本上解决问题&#xff0c;而不是想办法绕过问题&#xff0c;解决的问题很可能就是将来的核心竞争力。” 这让我想起了亚马逊公司&#x…

LeetCode 热题100——单调栈

​ 个人主页&#xff1a;日刷百题 系列专栏&#xff1a;〖C语言小游戏〗〖Linux〗〖数据结构〗 〖C语言〗 &#x1f30e;欢迎各位→点赞&#x1f44d;收藏⭐️留言&#x1f4dd; ​ ​ 写在前面&#xff1a; 递增单调栈&#xff1a;栈中元素从栈底到栈顶依次增大 递减单调栈…

3D模型人物换装系统(二 优化材质球合批降低DrawCall)

3D模型人物换装系统 介绍原理合批材质对比没有合批材质核心代码完整代码修改总结 介绍 本文使用2018.4.4和2020.3.26进行的测试 本文没有考虑法线贴图合并的问题&#xff0c;因为生成法线贴图有点问题&#xff0c;放在下一篇文章解决在进行优化 如果这里不太明白换装的流程可以…

HarmonyOS引导页登陆页以及tabbar的代码说明1

效果 以下代码是东拼西凑出来的。只是为了个人熟悉一下相关模块的使用&#xff1a; 用的知识点&#xff1a; Resouces 此部分分内容可以在项目中找到&#xff1a; resources/base/element/color.json 为项目着色配置&#xff0c;当然也可以正接在代码里写 float.json 为相关…

IPv6路由基础-理论与配置

在企业网络中&#xff0c;IPv6技术的应用越来越普及。IETF组织针对IPv6网络制定了路由协议OSPFv3。 OSPFv3 ff02::5是为OSPFv3路由协议预留的IPv6组播地址。OSPFv3中的路由条目下一跳地址是链路本地地址。OSPFv3是运行在IPv6网络的OSPF协议。运行OSPFv3的路由器使用物理接口的…

华为云Stack 8.X 流量模型分析(一)

一、基础知识 1.tap与tun ​ tap与tun都是操作系统&#xff08;Linux&#xff09;内核中的虚拟网络设备&#xff0c;等同于一个以太网设备&#xff0c;可以收发数据报文包。 ​ tap与tun的定义相同&#xff0c;两者仅仅是通过一个Flag来区分。但二者所承担的功能差别较大&am…