CSS中margin的使用方式-创新互联

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

公司主营业务：网站设计制作、做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联公司推出秀洲免费做网站回馈大家。

当我们学习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; }