CSS常见属性详解——内边距与外边距

内边距与外边距

内边距

外边距

应用场景


        在网页排版布局时,我们经常会希望元素与元素之间有一定的间距,此时我们可能会用到CSS的外边距或内边距属性,这两个属性都能让元素之间产生距离,那么他们之间有什么不同呢? 

内边距与外边距

        内边距是元素内容与元素边框之间的边距,会撑开元素的大小,外边距是元素与元素之间的边距,不会撑开元素的大小。

        首先通过下面的图直观地感受以下在网页中的内外边距:

        在网页中我们可以通过F12或者右击检查查看元素的内边距和外边距,选中时显示蓝色的区域就是内容,橙色区域是外边距;在选中的元素范围内,蓝色区域以外的绿色区域是内边距。

内边距

        内边距是元素内容与元素边框之间的边距,会撑开元素的大小,但不会影响元素内容的大小。

        我们可以把盒子想象为装着食物的快递盒,内边距想象为盒子四周的泡沫填充物,盒子的泡沫填充物增多,箱子就需要变大,但泡沫填充物的多少并不会影响食物本身的大小。

        内边距属性值为padding,它有四个方向,可以写为:

    padding-left: 属性值;
    padding-top: 属性值;
    padding-right: 属性值;
    padding-bottom: 属性值; 

        也可以直接写为一行,padding:值1,值2,值3,值4;。其中各个值分别指的是元素内容与上、右、下、左边的内边距。

            /* 上  右   下   左 */
        padding: 值1,值2,值3,值4;

        我们先设置一个盒子,代码如下:

<body><style>.box {width: 100px;height: 100px;background-color: pink;}</style><div class="box"></div>
</body>

        效果如下,这时候只是一个100px*100px的小盒子。

         此时我们设置一个大一点的内边距,在原来的代码上加一行padding,代码如下:

.box {width: 100px;height: 100px;background-color: pink;padding: 200px;
}

        这个时候我们可以发现元素被撑大了,效果如下:

        

        在页面中点击检查,蓝色区域就是盒子内容的大小,我们可以发现此时元素的内容并没有变大,而是内边距撑大了盒子。

外边距

        在元素与元素之间的间隙就是外边距,外边距可以让元素产生间隙,外边距不会影响元素的大小,也不会撑开元素。

        还是按照快递盒子来理解,每个快递盒子都是独立的个体,我们把两个快递盒子隔开的距离就是外边距,无论我们把快递盒子之间的距离隔开地多远,盒子本身的大小都是不变的。

        外边距的属性值为margin,写法与内边距类似,它也有四个方向,可以写为:

    margin-left: 属性值;
    margin-top: 属性值;
    margin-right: 属性值;
    margin-bottom: 属性值; 

        也可以写为一行,margin:值1,值2,值3,值4;。其中各个值分别指的是元素之间上、右、下、左边的外边距。

            /* 上  右   下   左 */
        margin: 值1,值2,值3,值4;

        我们假设三个盒子,为了便于观察,我们设置了一个弹性盒子,使得元素在同一行显示,我们给元素设置外边距,代码如下:

<body><style>.box-1 {width: 100px;height: 100px;background-color: pink;margin: 20px;}.box-2 {width: 100px;height: 100px;background-color: skyblue;}.container {display: flex;}.box-3 {width: 200px;height: 200px;background-color: saddlebrown;margin: 20px;}</style><div class="container"><div class="box-1"></div><div class="box-2"></div></div><div class="box-3"></div></body>

        这里粉色盒子与四周都有外边距,蓝色盒子与上方没有外边距(只有默认的),而棕色盒子与上面的盒子都有外边距,效果如下:

应用场景

        了解了内外边距后,我们可以在页面排版布局时使用内外边距隔开元素,需要注意的是,内边距会撑开元素的大小,而外边距与元素的大小无关。

        我们一般会在需要撑开内容物的场景下使用内边距,可能是内容比较小,需要内边距来撑开元素的大小的场景;但如果只是需要隔开元素,使得元素之间有间隙,且元素本身的大小不受影响,我们就使用外边距。 

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

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

相关文章

Nginx系列-10 realIp模块使用

背景 Nginx对每个模块都有说明文档&#xff0c;可参考:https://nginx.org/en/docs/ 当请求被代理后&#xff0c;真实客户端相对服务器被隐藏&#xff0c;即服务端无法判断HTTP消息来源。 如上图所示&#xff0c;IP分别为100.100.100.1和100.100.100.2的两个客户端向服务器200.…

centos7安装es及简单使用

为了方便日后查看&#xff0c;简单记录下&#xff01; 【启动es前,需要调整这个配置文件(/opt/elasticsearch-6.3.0/config/elasticsearch.yml)的两处ip地址,同时访问页面地址的ip:9200时,ip地址也对应修改】 【启动kibana前,需要调整这个配置文件(/opt/kibana-6.3.0/config/k…

java面试题 Spring部分(二)

1.Spring Boot的生命周期 典型回答 一个Spring的Bean从出生到销毁的全过程就是他的整个生命周期&#xff0c;经历以下的几个阶段&#xff1a; 整个生命周期可以大致分为3个大的阶段&#xff0c;分别是&#xff1a;创建、使用、销毁。还可以进一步分为5个小阶段&#xff1a;实…

08 字符串和字节串

使用单引号、双引号、三单引号、三双引号作为定界符&#xff08;delimiter&#xff09;来表示字符串&#xff0c;并且不同的定界符之间可以相互嵌套。 很多内置函数和标准库对象也都支持对字符串的操作。 x hello world y Python is a great language z Tom said, "Le…

centos7 mysql 基本测试(6)主从简单测试

centos7 xtrabackup mysql 基本测试&#xff08;6&#xff09;主从简单测试 mysql -u etc -p 1234aA~1 参考&#xff1a; centos7 时区设置 时间同步 https://blog.csdn.net/wowocpp/article/details/135931129 Mysql数据库&#xff1a;主从复制与读写分离 https://blog.csd…

HTML常见标签——超链接a标签

一、a标签简介 二、a标签属性 href属性 target属性 三、a标签的作用 利用a标签进行页面跳转 利用a标签返回页面顶部以及跳转页面指定区域 利用a标签实现文件下载 一、a标签简介 <a>标签用于做跳转、导航&#xff0c;是双标签&#xff0c;记作<a></a>&#…

移动式气象站:科技赋能,精准预报的新篇章

在这个气候多变、极端天气频发的时代&#xff0c;气象信息的准确性与及时性成为了社会各界关注的焦点。从农业生产到城市规划&#xff0c;从航空航海到日常生活&#xff0c;气象服务无处不在&#xff0c;其重要性不言而喻。而在这场气象科技的变革中&#xff0c;移动式气象站以…

linux对齐TOF和RGB摄像头画面

问题&#xff1a;TOF和RGB画面不对齐 linux同时接入TOF和RGB&#xff0c;两者出图时间是由驱动层控制&#xff08;RGB硬件触发出图&#xff09;&#xff0c;应用层只负责读取数据。 现在两者画面不对齐&#xff0c;发现是开始的时候两者出图数量不一致导致的。底层解决不了&a…

数据结构(Java):Map集合Set集合哈希表

目录 1、介绍 1.1 Map和Set 1.2 模型 2、Map集合 2.1 Map集合说明 2.2 Map.Entry<K&#xff0c;V> 2.3 Map常用方法 2.4 Map注意事项及实现类 3、Set集合 3.1 Set集合说明 3.2 Set常用方法 3.3 Set注意事项及其实现类 4、TreeMap&TreeSet 4.1 集合类TreeM…

「AI绘画Stable Diffusion 零基础入门 」AI 绘画SD原理与工具介绍,万字详解新手入门必看!

大家好&#xff0c;我是设计师阿威 AI 绘画原理 想要入门 AI 绘画&#xff0c;首先需要了解它的原理是什么样的。 其实很早就已经有人基于深度学习模型展开了对图像生成的研究了&#xff0c;但在那时&#xff0c;生成的图像分辨率和内容都非常抽象。 直到近两年&#xff0c…

【数据结构-前缀和】力扣3152.特殊数组II

如果数组的每一对相邻元素都是两个奇偶性不同的数字&#xff0c;则该数组被认为是一个 特殊数组 。 周洋哥有一个整数数组 nums 和一个二维整数矩阵 queries&#xff0c;对于 queries[i] [fromi, toi]&#xff0c;请你帮助周洋哥检查子数组 nums[fromi…toi] 是不是一个 特殊…

测试面试宝典(二十九)—— 如何对一个页面进行测试

对一个页面进行测试&#xff0c;通常可以遵循以下步骤和方法&#xff1a; 首先&#xff0c;进行页面的功能测试。检查页面上的所有元素&#xff0c;如按钮、链接、输入框、下拉菜单等是否能正常工作。比如点击按钮是否能触发预期的操作&#xff0c;链接能否正确跳转&#xff0…

Spring从入门到精通 01

文章目录 1. 依赖注入 (Dependency Injection, DI)2. 面向切面编程 (Aspect-Oriented Programming, AOP)3. 事务管理4. 简化 JDBC 开发5. 集成各种框架和技术6. 模块化和扩展性&#xff1a;主要的 Spring 模块&#xff1a;Core Container&#xff1a;AOP 模块&#xff1a;Data …

VLAN通讯实验

目录 拓扑图 需求 需求分析 配置过程 1、手工配置 2、 使用DHCP获得IP地址信息 3、测试全网是否可达 拓扑图 需求 1、PC1、PC3属于VLAN 2 2、PC2、PC4属于VLAN 3 3、通过DHCP使得PC获取IP地址信息 4、全网可达 需求分析 1、先手工配置网段&#xff0c;VLAN 2为192.168.1…

数据结构经典测试题4

1. #include <stdio.h> int main() { char *str[3] {"stra", "strb", "strc"}; char *p str[0]; int i 0; while(i < 3) { printf("%s ",p); i; } return 0; }上述代码运行结果是什么&#xff1f; A: stra strb strc B: s…

【用最少数量的箭引爆气球】python刷题记录

R2-贪心篇. 求最小&#xff0c;那就尽可能地假设更多的气球y值不相同咯。 不对&#xff0c;气球除了y值我们随便摆&#xff0c;所以找尽可能多重叠的&#xff0c;就作为同一只箭。 class Solution:def findMinArrowShots(self, points: List[List[int]]) -> int:#贪心策略…

原生PHP/JS自主开发的交友内核框架婚恋交友系统V10

本文来自&#xff1a;婚恋交友系统V10 - 源码1688 应用介绍 原生PHP/JS自主开发的交友内核框架&#xff0c;极高性能、无捆绑、自主权、无流水扣点、独立全开源 01脱单盲盒&#xff1a;脱单盲盒类似于漂流瓶&#xff0c;先将自己《投放》到盲盒中&#xff0c;另一伴有缘将您取…

Spring简单代码

Spring代码 导入坐标 <dependencies><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>5.2.10.RELEASE</version></dependency><dependency><groupId&g…

GO-学习-05-基本数据类型-布尔型

bool 只有true 和false 注意: 1.布尔类型变量的默认值为false。 2.Go语言中不允许将整型强制转换为布尔型。 3.布尔型无法参与数值运算&#xff0c;也无法与其他类型进行转换。 package main import "fmt" func main(){var a bool true //truevar b bool …

【文件fd】深入理解和实现Linux底下一切皆文件 | 系统和语言文件操作二者关系_封装 | 系统调用为什么怎样封装成库函数

目录 1.系统调用的打开/读/写文件操作 2.如何理解Linux底下一切皆文件 2.1设备属性 2.2设备的操作方法 3.如何实现Linus底下一切皆文件 4.源码查看 5.系统和语言文件操作二者关系 5.1 flags选项和C语言的"w""a"方式 二者的关系 5.2 系统的文件描…