这里是修真院web小课堂,每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解web知识/技能,本篇分享的是:
【什么时候用Margin?什么时候用Padding? 】
在HTML文档中,我们一般把HTML标签粗分为块级元素(block)和内联元素(inline)。块级元素是是构成一个html的主要和关键元素, 任意一个块级元素均可以用盒子模型(Box model)来解释说明。margin和padding属性是盒子模型的的组成部分,正确理解这两个属性也是学习用css布局的关键。
盒子模型:
任意一个块级元素均由content(内容), padding(内边距), background(包括背景颜色和图片), border(边框), margin(外边距)五个部分组成。
其中margin属性定义了元素边框外部的空白区域,给其赋值可以设置元素与元素之间的距离
padding属性定义了元素边框与元素内容之间的空白区域,给其赋值可以设置元素与内容之间距离
margin和padding的属性及语法:
1. Margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制块级元素之间的距离, 它们是透明不可见的, 可以分别给其四个方向赋值,也可以对值进行简写,其中属性值可以是具体数子,也可以用百分比表示,当用百分比时,百分比参考父元素的宽度。
margin-top: 40px;
margin-right: 40px;
margin-bottom: 40px;
margin-left: 40px;
根据上, 右, 下, 左的顺时针规则, 简写为:margin: 40px 40px 40px 40px;
当上下, 左右margin值分别一致, 可简写为:margin: 40px 40px;
前一个40px代表上下margin值, 后一个40px代表左右margin值。
当上下不同,左右一致时,可简写为:margin:20px 40px 30px;
中间的40px代表左右margin值。
当上下左右margin值均一致, 可简写为:margin: 40px;
2. Padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制块级元素内部, content与border之间的距离, 其代码, 简写请参考margin属性的写法.
什么时候用margin?什么时候用padding?
使用margin值的情况:
需要在border外侧添加空白时。
空白处不需要背景(色)时。
上下相连的两个盒子之间的空白,需要相互抵消时。如15px + 20px的margin,将得到20px的空白。(margin折叠)。
需要使用负值对页面布局时(margin值可以取负,padding不行)。
使用padding时的情况:
需要在border内测添加空白时。
空白处需要背景(色)时。
上下相连的两个盒子之间的空白,希望等于两者之和时。如15px + 20px的padding,将得到35px的空白。
margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干;padding用于元素与内容之间的间隔,让内容(文字)与(包裹)元素之间有一段“呼吸距离”。
什么是margin折叠?
在CSS中,两个或以上的块元素(可能是兄弟,也可能不是)之间的相邻外边距可以被合并成一个单独的外边距。通过此方式合并的外边距被称为折叠,且产生的已合并的外边距被称为折叠外边距。
处于同一个块级上下文中的块元素,没有行框、没有间隙、没有内边距和边框隔开它们,这样的元素垂直边缘毗邻,则称之为相邻。
margin和padding还有哪些不同?
在怪异盒模型中,一个块的总宽度受margin影响但不受padding影响。
参考文献
作者:自娱自楽
链接:https://www.jianshu.com/p/99f3e3c93f08
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
如果这篇文章对你有帮助,并且使你对修真院免费在线学习感兴趣,可以通过我的邀请链接进行注册,这样可以在日后为你的线下学习减免学费。
邀请链接:http://www.jnshu.com/login/1/23246304
邀请码:23246304
更多内容,可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院:https://www.jnshu.com,初学者转行到互联网的聚集地