今天跟大家分享下CSS 之 margin的知识。
前言
当我们学习CSS时,我们大多数人学到的第一件事是CSS中盒子的各个部分的细节,这部分通过叫做 CSS盒模型。“盒模型”中的元素之一是margin,即盒子周围的透明区域,它会将其他元素从盒子内容中推开。
CSS1中描述了 margin-top、margin-right、margin-bottom和margin-left属性,以及一次设置所有四个属性的简写 margin。
margin看起来是一个相当简单的事情,但是,在本文中,咱们将看一些在使用margin一些让人迷惑有有趣的事情。 特别是,margin之间如何相互作用,以及 margin 重叠效果。
1 CSS 盒模型
CSS 盒模型指的是一个盒子的各个部分——content、padding、border和margin,它们各自之前是如何布局及相互作用的。
盒子的的四个margin属性和maring缩写都在CSS1中定义。
CSS2.1规范有一个演示盒模型的插图,还定义了用来描述各种盒子的术语,其中包括 content box、填padding box、border box和 margin box。
现在有一个 Level 3 Box Model specification 的草案。这个规范引用了CSS2作为盒模型和margin的定义,因此我们将在本文的大部分内容中使用CSS2定义。
2 CSS 重叠
CSS1 规范定义了margin,也定义了垂直 margin 重叠。如果考虑到在早期,CSS被用作文档格式语言,那么 margin 重叠是有意义的。 margin 重叠意味着,当一个有底部margin的标题后面跟着一个有顶部 margin 的段落时,它们之间就不会出现较大的空白。
当两个 margin 发生重叠时,它们将组合在一起,两个元素之间的空间取较大的一个。 较小的 margin 在较大的里面。
在以下情况下,margin 会重叠:
相邻的兄弟姐妹
完全空盒子
父元素和第一个或最后一个子元素
依次来看看这些场景。
3 相邻的兄弟姐妹
对 margin 重叠的最初描述是演示相邻兄弟姐妹之间的 margin 是如何重叠的。除了下面提到的情况之外,如果有两个元素在正常流中依次显示,那么第一个元素的底部 margin 将与下面元素的顶部 margin 一起重叠。
在下面示例中,有三个div元素。第一个 div 的顶部和底部的margin都是50px。第二个 div 的顶部和底部 margin 都是20px。
第三个 div 的顶部和底部 margin 都是3em。前两个元素之间的 margin 是50px,因为较小的顶部 margin 与较大的底部 margin 相结合。
第二个元素与第三个元素之间的 margin 是 3em,因为3em大于第二个元素底部margin 20px。
html
<div class="wrapper">
<div class="box example1">
margin-top: 50px; margin-bottom: 50px;
</div>
<div class="box example2">
margin-top: 20px; margin-bottom: 20px;
</div>
<div class="box example3">
margin-top: 3em; margin-bottom: 3em;
</div>
</div>
css
.wrapper {
border: 5px dotted black;
}
.example1 {
margin: 50px 0 50px 0;
}
.example2 {
margin: 20px 0 20px 0;
}
.example3 {
margin: 3em 0 3em 0;
}
body {
font: 1.4em/1.3 "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
margin: 2em 3em;
}
.box {
background-color: rgb(55,55,110);
color: white;
padding: 20px;
border-radius: