margin与padding的区别是什么?
margin与padding的区别是什么?
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
1.背景介绍 什么是margin 什么是padding 我们在进行网页制作时都会遇到为元素设定边距的情况,边距又分为内边距和外边距,即margin和padding.
margin和padding是在html中的盒模型的基础上出现的,
margin是盒子的外边距,即盒子与盒子之间的距离,而padding是内边距,是盒子的边与盒子内部元素的距离。
2.知识剖析 margin是什么? CSS 边距属性定义元素周围的空间。通过使用单独的属性,可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School
边界,元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南
padding是什么? padding 属性设置元素的内边距,属性定义元素边框与元素内容之间的空间。
同理padding可以称之为“内边距”,但是我又恰恰喜欢称呼padding为“补白”或者“留白”
Margin的特性 margin始终是透明的。margin通过使用单独的属性,可以对上、右、下、左的外边距进行设置。即:margin-top、margin-right、margin-bottom、margin-left。
margin只有一个值表示上右下左,如果 margin 只有两个值第一个值表示上下,第二个值为左右。
margin有三个值 表示上左右下,margin有四个值表示上下左右四个方向。
padding的特性 padding属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,
从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
3.常见问题 1.什么是盒子模型。
2.margin和padding的区别。
3.用margin好还是用padding好。
4.解决方案 什么是盒子模型。
具备内容、填充、边框、边界这些属性,能包含其他元素的容器都是盒子。
margin和padding的区别。 我们以DIV为一个盒子为例,既然和现实生活中的盒子一样,那我们想一下,生活中的盒子内部是不是空的好用来存放东西,而里面存放东西的区域我们给他起个名字叫“content(内容)”,而盒子的纸壁给他起个名字叫“border(边框)”,如果盒子内部的东西比如是一块硬盘,但是硬盘怕震动,所以我们需要在硬盘的四周盒子的内部均匀填充一些防震材料,这时硬盘和盒子的边框就有了一定的距离了,我们称这部分距离叫“padding(内边距)”,如果我们需要购买许多块硬盘,还是因为硬盘怕震动所以需要在盒子和盒子之间也需要一些防震材料来填充,那么盒子和盒子之间的距离我们称之为"margin(外边距)"
用margin好还是用padding好 何时应当使用margin:
需要在border外侧添加空白时。
空白处不需要背景(色)时。
上下相连的两个盒子之间的空白,需要相互抵消时。如15px + 20px的margin,将得到20px的空白。
复制代码
何时应当时用padding:
需要在border内测添加空白时。
空白处需要背景(色)时。
上下相连的两个盒子之间的空白,希望等于两者之和时。如15px + 20px的padding,将得到35px的空白。
复制代码
margin在块级元素 margin在块级元素下,他的性能可以完全体现,上下左右任你设定.
margin在行级元素 margin也能用于内联元素,这是规范所允许的,但是margin-top和margin-bottom对内联元素(对行)的高度没有影响,并且由于边界效果(margin效果)是透明的,他也没有任何的视觉影响。
总结 margin属性可以应用于几乎所有的元素,除了表格显示类型。
padding属性的使用1.需要在border内测添加空白时。
2.空白处需要背景(色)时。
复制代码
margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干;padding用于元素与内容之间的间隔,让内容(文字)与(包裹)元素之间有一段“呼吸距离”。
5.编码实战 6.扩展思考 什么是margin折叠? 在CSS中,两个或以上的块元素(可能是兄弟,也可能不是)之间的相邻外边距可以被合并成一个单独的外边距。通过此方式合并的外边距被称为折叠,且产生的已合并的外边距被称为折叠外边距。 处于同一个块级上下文中的块元素,没有行框、没有间隙、没有内边距和边框隔开它们,这样的元素垂直边缘毗邻,则称之为相邻。
7.参考文献 参考一:
margin的详细用法
复制代码
参考二:
怎么区分margin 和 padding的区别。
复制代码
参考三
盒子模型知多少
复制代码
参考四
margin为负值产生的影响和常见布局应用
复制代码
8.更多讨论 鸣谢 感谢大家观看
今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~
作者:menggx1
链接:https://juejin.im/post/5ae6b9516fb9a07aab29a14e
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
margin与padding的区别是什么?的更多相关文章
- CSS中margin与padding的区别
CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界(margin):元素周围生成额外 ...
- margin与padding大比拼
用margin还是用padding这个问题相信是每个学css的人都想要去深入了解的. CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距 ...
- 关于margin、padding 对内联元素的影响
内联元素和块级元素的区别是新手必须要掌握的知识点.大家可能平时注意块级元素比较多.所以这里重点让我们来讲讲常见的width height margin padding 对inline元素的影响. 测 ...
- 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位
前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...
- Css盒模型属性详解(margin和padding)
Css盒模型属性详解(margin和padding) 大家好,我是逆战班的一名学员,今天我来给大家分享一下关于盒模型的知识! 关于盒模型的属性详解及用法 盒模型基本属性有两个:padding和marg ...
- web兼容学习分析笔记-margin 和padding浏览器解析差异
二.margin 和padding浏览器解析差异 只有默认margin的元素 <body>margin:8px margin:15px 10px 15px 10px(IE7) <b ...
- 浅谈Margin和Padding值设置成百分数的布局
转自:问说网http://www.uedsc.com/discussion-margin-and-padding-values.html Margin和Padding是我们在网页设计经常使用到的CSS ...
- DIV+CSS:Margin和Padding属性[转载]
margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边. margin: 包括margin-top.margin-right.margin-bottom. ...
- * {margin:0px; padding:0px;}什么意思?
* {margin:0px; padding:0px;} * 表示所有的元素的对齐方式以及和父类之间的间距都为0 body{margin:0px;padding:0px;} body里面的则表示的是 ...
随机推荐
- ssh 多秘钥管理和坑
概述 很久之前就想研究一下 ssh 的多秘钥管理,今天正好有时间就研究了一下,挺简单的,记录下来,供以后开发时参考,相信对其他人也有用. 参考资料: Git - 生成 SSH公钥 , Linux 下多 ...
- script标签defer与async的区别
总结: async 会在文件下载完毕后立即执行 会阻止html parser defer 会下载完以后等html parser结束后执行,保证顺序
- robot framework 接口自动化之登录
网络不便,好久没更了,颓废好久,惭愧 目录 1.安装必须的库 2.固定格式介绍 3.完成一个登录 1.安装必须的库 requestsLibrary.requests安装 1.pip install r ...
- 中国MOOC_零基础学Java语言_第3周 循环_2数字特征值
2 数字特征值(5分) 题目内容: 对数字求特征值是常用的编码算法,奇偶特征是一种简单的特征值.对于一个整数,从个位开始对每一位数字编号,个位是1号,十位是2号,以此类推.这个整数在第n位上的数字记作 ...
- 【ABAP系列】SAP 如何用ABAP实现自动发送外部邮件
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP 如何用ABAP实现自动发 ...
- MySql 性能优化之 Explain
MySQL 之 Explain 输出分析 背景 前面的文章写过 MySQL 的事务和锁,这篇文章我们来聊聊 MySQL 的 Explain,估计大家在工作或者面试中多多少少都会接触过这个.可能工作中实 ...
- RocketMQ事务性消息及持久化
TransactionProducer(事务消息): 在分布式系统中,我们时常会遇到分布式事务的问题,除了常规的解决方案之外,我们还可以利用RocketMQ的事务性消息来解决分布式事务的问题.Rock ...
- Java编程思想学习录(连载之:内部类)
内部类基本概念 可将一个类的定义置于另一个类定义的内部 内部类允许将逻辑相关的类组织在一起,并控制位于内部的类的可见性 甚至可将内部类定义于一个方法或者任意作用域内! 当然,内部类 ≠ 组合 内部类拥 ...
- ubuntu 新建root用户
1. sudo passwd :设置root用户密码 2. 切换用户 方式一:su 方式二: su root 3. 新增普通用户
- CentOS卸载lamp环境的步骤
学习PHP的时候需要在CentOS系统下安装lamp环境,安装容易卸载就没那么简单了,因为lamp由Apache.MySQL.PHP三个部分构成,需要逐个卸载,小编就给大家介绍下CentOS卸载lam ...