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里面的则表示的是 ...
随机推荐
- rocketMQ 通信协议格式
rocketMQ 使用 netty 通信,端对端的通信,为了避免粘包.分包,需要指定发送数据的边界. 使用的解码器是 LengthFieldBasedFrameDecoder // org.apach ...
- Nova 的高性能虚拟机支撑
目录 目录 CPU 计算平台体系架构 SMP 架构 NUMA 结构 MMP 结构 Nova 的高性能虚拟机 Nova 虚拟机 CPU/RAM 设计的背景 操作系统许可(Licensing) 性能(Pe ...
- Jmeter之检查点
检查点 Jmeter中检查点也叫断言,Jmeter中有很多类型的断言,但是最常用的是响应断言,即根据服务器返回的结果来判断测试是否通过. 响应断言 添加断言结果用于运行完毕后查看结果 测试通过 测试不 ...
- MySQL单列索引和组合索引的创建及区别介绍
MySQL单列索引是我们使用MySQL数据库中经常会见到的,MySQL单列索引和组合索引的区别可能有很多人还不是十分的了解,下面就为您分析两者的主要区别,供您参考学习. 为了形象地对比两者,再建一个表 ...
- cocos2dx基础篇(18) 数据存储CCUserDefault
在cocos2dx中提供了一个数据存储类CCUserDefault,可以作为一个轻量级的数据库来使用.它支持五种数据bool.int.float.double.string的存储. [3.x] ...
- 手工设计神经MNIST使分类精度达到98%以上
设计了两个隐藏层,激活函数是tanh,使用Adam优化算法,学习率随着epoch的增大而调低 import tensorflow as tf from tensorflow.examples.tuto ...
- Android - Android 面试题集 -- Android 部分答案
2.1 Activity1.Activity是什么?Activity是Android的四大组件之一.是用户操作的可视化界面:它为用户提供了一个完成操作指令的窗口.当我们创建完毕Activity之后,需 ...
- Go语言入门篇-基本流程控制
一.if语句 二.switch语句 三.for语句 四.select语句
- CentOS7编译安装sshpass过程
环境说明:centos 7 cat /etc/redhat-release CentOS Linux release 7.6.1810 (Core) 我的sshpass版本 sshpass-1.06. ...
- 【转】mysqldump原理探究
作者:胡儿胡儿 来源:CSDN 原文:https://blog.csdn.net/cug_jiang126com/article/details/49824471 —————————————————— ...