CSS中margin的使用方式

這篇文章主要介紹了CSS中margin的使用技巧，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

當(dāng)我們學(xué)習(xí)CSS時(shí)，我們大多數(shù)人學(xué)到的第一件事是CSS中盒子的各個(gè)部分的細(xì)節(jié)，這部分通過(guò)叫做 CSS盒、模型。“盒模型”中的元素之一是margin，即盒子周圍的透明區(qū)域，它會(huì)將其他元素從盒子內(nèi)容中推開(kāi)。

CSS1中描述了 margin-top、margin-right、margin-bottom和margin-left屬性，以及一次設(shè)置所有四個(gè)屬性的簡(jiǎn)寫(xiě) margin。

margin看起來(lái)是一個(gè)相當(dāng)簡(jiǎn)單的事情，但是，在本文中，咱們將看一些在使用margin一些讓人迷惑有有趣的事情。 特別是，margin之間如何相互作用，以及 margin 重疊效果。

CSS 盒模型

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

盒子的的四個(gè)margin屬性和maring縮寫(xiě)都在CSS1中定義。

CSS2.1規(guī)范有一個(gè)演示盒模型的插圖，還定義了用來(lái)描述各種盒子的術(shù)語(yǔ)，其中包括 content box、填padding box、border box和 margin box。

現(xiàn)在有一個(gè) Level 3 Box Model specification 的草案。這個(gè)規(guī)范引用了CSS2作為盒模型和margin的定義，因此我們將在本文的大部分內(nèi)容中使用CSS2定義。

margin 重疊

CSS1 規(guī)范定義了margin，也定義了垂直 margin 重疊。如果考慮到在早期，CSS被用作文檔格式語(yǔ)言，那么 margin 重疊是有意義的。 margin 重疊意味著，當(dāng)一個(gè)有底部margin的標(biāo)題后面跟著一個(gè)有頂部 margin 的段落時(shí)，它們之間就不會(huì)出現(xiàn)較大的空白。

當(dāng)兩個(gè) margin 發(fā)生重疊時(shí)，它們將組合在一起，兩個(gè)元素之間的空間取較大的一個(gè)。 較小的 margin 在較大的里面。

在以下情況下，margin 會(huì)重疊：

• 相鄰的兄弟姐妹

• 完全空盒子

• 父元素和第一個(gè)或最后一個(gè)子元素

依次來(lái)看看這些場(chǎng)景。

相鄰的兄弟姐妹

對(duì) margin 重疊的最初描述是演示相鄰兄弟姐妹之間的 margin 是如何重疊的。除了下面提到的情況之外，如果有兩個(gè)元素在正常流中依次顯示，那么第一個(gè)元素的底部 margin 將與下面元素的頂部 margin 一起重疊。

在下面示例中，有三個(gè)div元素。第一個(gè) div 的頂部和底部的margin都是50px。第二個(gè) div 的頂部和底部 margin 都是20px。第三個(gè) div 的頂部和底部 margin 都是3em。前兩個(gè)元素之間的 margin 是50px，因?yàn)檩^小的頂部 margin 與較大的底部 margin 相結(jié)合。第二個(gè)元素與第三個(gè)元素之間的 margin 是 3em，因?yàn)?code>3em大于第二個(gè)元素底部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: .5em;
}

運(yùn)行效果:

完全空盒子

如果一個(gè)盒子是空的，那么它的頂部和底部 margin 可能會(huì)相互重疊。在下面的示例中，class為empty的元素的頂部和底部 margin 各為50px，但是，第一項(xiàng)和第三項(xiàng)之間的 margin不是100px，而是50px。這是由于兩個(gè) margin 重疊造成的。如果向空盒子中放入內(nèi)容就會(huì)阻止 margin 合并。

html

<div class="wrapper">

<div class="box">
  A box
</div>

<div class="box empty"></div>

<div class="box">
  Another box
</div>
  
</div>

css

.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;
}

運(yùn)行效果：

父元素和第一個(gè)或最后一個(gè)子元素

margin 重疊讓人猝不及防，因?yàn)樗袝r(shí)候不是很直觀。在下面的示例中，有一個(gè)類名為 wrapper 的div，給這個(gè)div一個(gè)紅色的outline，這樣就可以看到它在哪里了。

這個(gè)div里面的三個(gè)子元素的 margin 都是50px。但是你會(huì)發(fā)現(xiàn)實(shí)際的效果是第一項(xiàng)和最后一項(xiàng)與父元素的的margin齊平，好像子元素和父元素之間沒(méi)有50px的margin一樣。

html

<div class="wrapper">

<div class="box">
  Item 1
</div>

<div class="box">
  Item 2
</div>

<div class="box">
  Item 3
</div>
  
</div>

css

.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;
}

運(yùn)行效果：

這是因?yàn)樽庸?jié)點(diǎn)上的margin會(huì)隨著父節(jié)點(diǎn)上的任何一邊的margin相互重疊，從而最終位于父節(jié)點(diǎn)的外部。如果使用DevTools檢查第一個(gè)子元素，就可以看到這一點(diǎn)，顯示的黃色區(qū)域就是是 margin。

僅塊元素 margin 重疊

在CSS2中，只指定垂直方向的 margin 重疊，即元素的頂部和底部 margin。因此，上面的左右邊距不會(huì)重疊。

值得注意的，margin 只在塊的方向上重疊，比如段落之間。

阻止 margin 重疊

如果一個(gè)元素是絕對(duì)的定位，或者是浮動(dòng)的，那么它的margin永遠(yuǎn)不會(huì)重疊。然而，假設(shè)你遇到了上面示例中的幾種情況，那么如何才能阻止 margin 重疊呢？

例如，一個(gè)完全空的盒子，如果它有border或padding，它的上下 margin就不會(huì)重疊。在下面的例子中，給這個(gè)空盒子添加了1px的padding。現(xiàn)在這個(gè)空盒子的的上方和下方都有一個(gè)50px的 margin。

html

<div class="wrapper">

<div class="box">
  A box
</div>

<div class="box empty"></div>

<div class="box">
  Another box
</div>
  
</div>

css

.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;
  padding: 1px;
}

運(yùn)行效果：

這背后是有邏輯，如果盒子是完全空的，沒(méi)有border或padding，它基本上是不可見(jiàn)的。 它可能是CMS中標(biāo)記為空的段落元素。 如果你的CMS添加了多余的段落元素，你可能不希望它們?cè)谄渌温渲g造成較大的空白，這時(shí) margin 重疊就有一定的意義。

對(duì)于父元素和第一個(gè)或最后一個(gè)子元素 margin 重疊，如果我們向父級(jí)添加border，則子級(jí)上的margin會(huì)保留在內(nèi)部。

...
.wrapper {
  border: 5px dotted black;
}
...

同樣，這種行為也有一定的邏輯。如果出于語(yǔ)義目的而對(duì)元素進(jìn)行包裝，但這些元素不顯示在屏幕上，那么你可能不希望它們?cè)陲@示中引入大的 margin。當(dāng)web主要是文本時(shí)，這很有意義。當(dāng)我們使用元素來(lái)布局設(shè)計(jì)時(shí)，它的重疊行為就沒(méi)有多大的意義了。

創(chuàng)建格式化上下文（BFC）

BFC（Block Formatting Context）格式化上下文，是Web頁(yè)面中盒模型布局的CSS渲染模式，指一個(gè)獨(dú)立的渲染區(qū)域或者說(shuō)是一個(gè)隔離的獨(dú)立容器。

BFC 可以阻止邊距的重疊。 如果我們?cè)倏锤冈睾偷谝粋€(gè)或最后一個(gè)子元素的示例，可以在 wrapper 元素加上 display: flow-root就會(huì)創(chuàng)建一個(gè)新的BFC，從而阻止 margin 合并

...
.wrapper {
  outline: 1px solid red;
  display: flow-root;
}
...

display: flow-root 是CSS3新出來(lái)的一個(gè)屬性，用來(lái)創(chuàng)建一個(gè)無(wú)副作用的 BFC。將overflow屬性的值設(shè)為auto也會(huì)產(chǎn)生同樣的效果，因?yàn)檫@也創(chuàng)建了一個(gè)新的BFC，盡管它也可能創(chuàng)建一些在某些場(chǎng)景中不需要的滾動(dòng)條。

flex 和 grid 容器

flex 和 grid 容器為其子元素建立flex和grid格式化上下文，因此它們也能阻止 margin 的重疊。

還是以上面的例子為例，將 wrapper 改用 flex 布局：

...
.wrapper {
  outline: 1px solid red;
  display: flex;
  flex-direction: column;
}
...

網(wǎng)站 margin 策略

由于margin 會(huì)重疊，最好能找到一種一致的方法來(lái)處理網(wǎng)站的 margin。最簡(jiǎn)單的方法是只在元素的頂部或底部定義 margin。這樣，就很少會(huì)遇到 margin 重疊的問(wèn)題，因?yàn)橛?code>margin的邊總是與沒(méi)有margin的邊相鄰。

這個(gè)解決方案并不能解決你可能遇到的問(wèn)題，因?yàn)樽釉氐?code>margin會(huì)與父元素相互重疊。這個(gè)特定的問(wèn)題往往不那么常見(jiàn)，但知道它為什么會(huì)發(fā)生可以幫助你想出一個(gè)解決方案。

對(duì)此，一個(gè)理想的解決方案是給元素設(shè)置 display: flow-root，但有的瀏覽器并不支持，可以使用overflow創(chuàng)建BFC、或?qū)⒏冈卦O(shè)置成flex容器，當(dāng)然還可以設(shè)置padding來(lái)解決。

百分比 margin

當(dāng)你在CSS中使用百分比的時(shí)候，它必須是某個(gè)元素的百分比。使用百分比設(shè)置的 margin(或 padding)始終是父元素內(nèi)聯(lián)大小(水平寫(xiě)入模式下的寬度)的百分比。這意味著在使用百分比時(shí)，元素周圍的padding大小都是相同的。

在下面的示例中，有一個(gè)200px 寬的 d當(dāng)，里面是一個(gè)類名為 box 的div，它的 margin值為10%，也就是 20px （200*10%）。

html

 <div class="wrapper">
  <div class="box">
    I have a margin of 10%.
  </div>
</div>

css

 * {
  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;
}

我們?cè)诒疚闹幸恢痹谟懻摯怪?margin ，然而，現(xiàn)代CSS傾向于以相對(duì)于流的方式而不是物理方式來(lái)考慮事情。因此，當(dāng)我們討論垂直邊距時(shí)，我們實(shí)際上是在討論塊維度的邊距。如果我們?cè)谒綄?xiě)作模式下，這些 margin 將是頂部和底部，但在垂直寫(xiě)作模式下，這些 margin 將是右側(cè)和左側(cè)。

一旦使用邏輯的、流相關(guān)的方向，就更容易討論塊的開(kāi)始和結(jié)束，而不是塊的頂部和底部。為了簡(jiǎn)化這一過(guò)程，CSS引入了邏輯屬性和值規(guī)范。這將流的相關(guān)屬性映射到物理屬性上。

• margin-top = margin-block-start

• margin-right = margin-inline-end

• margin-bottom = margin-block-end

• margin-left = margin-inline-start

還有兩個(gè)新的快捷鍵，可以同時(shí)設(shè)置兩個(gè)塊或者兩個(gè)內(nèi)嵌塊。

• margin-block

• margin-inline

在下面示例中，使用了這些流相關(guān)關(guān)鍵字，然后更改了盒子的編寫(xiě)模式，你可以看到 margin 是如何遵循文本方向的:

html

<div class="wrapper horizontal-tb">
  <div class="box">
    A box with a horizontal-tb writing mode.
  </div>
</div>

<div class="wrapper vertical-rl">
  <div class="box">
    A box with a vertical-rl writing mode.
  </div>
</div>

css

* {
  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;
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS中margin的使用技巧”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!