CSS中margin的使用方式

这篇文章主要介绍了CSS中margin的使用技巧，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

10年积累的成都网站制作、网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有下城免费网站建设让你可以放心的选择与我们合作。

当我们学习CSS时，我们大多数人学到的第一件事是CSS中盒子的各个部分的细节，这部分通过叫做 CSS盒、模型。“盒模型”中的元素之一是margin，即盒子周围的透明区域，它会将其他元素从盒子内容中推开。

CSS1中描述了 margin-top、margin-right、margin-bottom和margin-left属性，以及一次设置所有四个属性的简写 margin。

margin看起来是一个相当简单的事情，但是，在本文中，咱们将看一些在使用margin一些让人迷惑有有趣的事情。特别是，margin之间如何相互作用，以及 margin 重叠效果。

CSS 盒模型

CSS 盒模型指的是一个盒子的各个部分——content、padding、border和margin,它们各自之前是如何布局及相互作用的，如下所示：

CSS中margin的使用方式

盒子的的四个margin属性和maring缩写都在CSS1中定义。

CSS2.1规范有一个演示盒模型的插图，还定义了用来描述各种盒子的术语，其中包括 content box、填padding box、border box和 margin box。

CSS中margin的使用方式

现在有一个 Level 3 Box Model specification 的草案。这个规范引用了CSS2作为盒模型和margin的定义，因此我们将在本文的大部分内容中使用CSS2定义。

margin 重叠

CSS1 规范定义了margin，也定义了垂直 margin 重叠。如果考虑到在早期，CSS被用作文档格式语言，那么 margin 重叠是有意义的。 margin 重叠意味着，当一个有底部margin的标题后面跟着一个有顶部 margin 的段落时，它们之间就不会出现较大的空白。

当两个 margin 发生重叠时，它们将组合在一起，两个元素之间的空间取较大的一个。较小的 margin 在较大的里面。

在以下情况下，margin 会重叠：

相邻的兄弟姐妹
完全空盒子
父元素和第一个或最后一个子元素

依次来看看这些场景。

相邻的兄弟姐妹

对 margin 重叠的最初描述是演示相邻兄弟姐妹之间的 margin 是如何重叠的。除了下面提到的情况之外，如果有两个元素在正常流中依次显示，那么第一个元素的底部 margin 将与下面元素的顶部 margin 一起重叠。

在下面示例中，有三个div元素。第一个 div 的顶部和底部的margin都是50px。第二个 div 的顶部和底部 margin 都是20px。第三个 div 的顶部和底部 margin 都是3em。前两个元素之间的 margin 是50px，因为较小的顶部 margin 与较大的底部 margin 相结合。第二个元素与第三个元素之间的 margin 是 3em，因为3em大于第二个元素底部margin 20px。

html




  margin-top: 50px; margin-bottom: 50px;

margin-top: 20px; margin-bottom: 20px;

.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: .5em; }

.wrapper { border: 5px dotted black; } 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; border-radius: .5em; } .empty { margin: 50px 0 50px 0; }

.wrapper { outline: 1px solid red; } .box { margin: 50px; } 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: .5em; }

* { box-sizing: border-box; } .wrapper { border: 5px dotted black; width: 200px; } .box { background-color: rgb(55,55,110); color: white; padding: 20px; border-radius: .5em; margin: 10%; } body { font: 1.4em/1.3 "Gill Sans", "Gill Sans MT", Calibri, sans-serif; margin: 2em 3em; }

* { box-sizing: border-box; } .wrapper { border: 5px dotted black; inline-size: 200px; } .horizontal-tb { writing-mode: horizontal-tb; margin-bottom: 1em; } .vertical-rl { writing-mode: vertical-rl; } .box { background-color: rgb(55,55,110); color: white; padding: 20px; border-radius: .5em; margin-block-start: 30px; margin-block-end: 10px; margin-inline-start: 2em; margin-inline-end: 5%; } body { font: 1.4em/1.3 "Gill Sans", "Gill Sans MT", Calibri, sans-serif; margin: 2em 3em; }