關於 CSS margin,一些讓你模糊的點

前端小智發表於2019-09-11

原文:www.smashingmagazine.com/2019/07/mar…

譯者:前端小智


為了保證的可讀性,本文采用意譯而非直譯。

當我們學習CSS時,我們大多數人學到的第一件事是CSS中盒子的各個部分的細節,這部分通過叫做 CSS盒、模型。“盒模型”中的元素之一是margin,即盒子周圍的透明區域,它會將其他元素從盒子內容中推開。

CSS1中描述了 margin-topmargin-rightmargin-bottommargin-left屬性,以及一次設定所有四個屬性的簡寫 margin

margin看起來是一個相當簡單的事情,但是,在本文中,我們們將看一些在使用margin一些讓人迷惑有有趣的事情。 特別是,margin之間如何相互作用,以及 margin 重疊效果。

想閱讀更多優質文章請猛戳GitHub部落格,一年百來篇優質文章等著你!

CSS 盒模型

CSS 盒模型指的是一個盒子的各個部分——contentpaddingbordermargin,它們各自之前是如何佈局及相互作用的, 如下所示:

關於 CSS margin,一些讓你模糊的點

盒子的的四個margin屬性和maring縮寫都在CSS1中定義。

CSS2.1規範有一個演示盒模型的插圖,還定義了用來描述各種盒子的術語,其中包括 content box、填padding boxborder boxmargin 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。前兩個元素之間的 margin50px,因為較小的頂部 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: .5em;
}
複製程式碼

執行效果:

關於 CSS margin,一些讓你模糊的點

完全空盒子

如果一個盒子是空的,那麼它的頂部和底部 margin 可能會相互重疊。在下面的示例中,classempty的元素的頂部和底部 margin 各為50px,但是,第一項和第三項之間的 margin不是100px,而是50px。這是由於兩個 margin 重疊造成的。如果向空盒子中放入內容就會阻止 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;
}
複製程式碼

執行效果:

關於 CSS margin,一些讓你模糊的點

父元素和第一個或最後一個子元素

margin 重疊讓人猝不及防,因為它有時候不是很直觀。在下面的示例中,有一個類名為 wrapperdiv,給這個div一個紅色的outline,這樣就可以看到它在哪裡了。

這個div裡面的三個子元素的 margin 都是50px。但是你會發現實際的效果是第一項和最後一項與父元素的的margin齊平,好像子元素和父元素之間沒有50pxmargin一樣。

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;
}
複製程式碼

執行效果:

關於 CSS margin,一些讓你模糊的點

這是因為子節點上的margin會隨著父節點上的任何一邊的margin相互重疊,從而最終位於父節點的外部。如果使用DevTools檢查第一個子元素,就可以看到這一點,顯示的黃色區域就是是 margin

關於 CSS margin,一些讓你模糊的點

僅塊元素 margin 重疊

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

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

阻止 margin 重疊

如果一個元素是絕對的定位,或者是浮動的,那麼它的margin永遠不會重疊。然而,假設你遇到了上面示例中的幾種情況,那麼如何才能阻止 margin 重疊呢?

例如,一個完全空的盒子,如果它有borderpadding,它的上下 margin就不會重疊。在下面的例子中,給這個空盒子新增了1px的padding。現在這個空盒子的的上方和下方都有一個50pxmargin

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;
}
複製程式碼

執行效果:

關於 CSS margin,一些讓你模糊的點

這背後是有邏輯,如果盒子是完全空的,沒有borderpadding,它基本上是不可見的。 它可能是CMS中標記為空的段落元素。 如果你的CMS新增了多餘的段落元素,你可能不希望它們在其他段落之間造成較大的空白,這時 margin 重疊就有一定的意義。

對於父元素和第一個或最後一個子元素 margin 重疊,如果我們向父級新增border,則子級上的margin會保留在內部。

...
.wrapper {
  border: 5px dotted black;
}
...
複製程式碼

關於 CSS margin,一些讓你模糊的點

同樣,這種行為也有一定的邏輯。如果出於語義目的而對元素進行包裝,但這些元素不顯示在螢幕上,那麼你可能不希望它們在顯示中引入大的 margin。當web主要是文字時,這很有意義。當我們使用元素來佈局設計時,它的重疊行為就沒有多大的意義了。

建立格式化上下文(BFC)

BFC(Block Formatting Context)格式化上下文,是Web頁面中盒模型佈局的CSS渲染模式,指一個獨立的渲染區域或者說是一個隔離的獨立容器。

BFC 可以阻止邊距的重疊。 如果我們再看父元素和第一個或最後一個子元素的示例,可以在 wrapper 元素加上 display: flow-root就會建立一個新的BFC,從而阻止 margin 合併

...
.wrapper {
  outline: 1px solid red;
  display: flow-root;
}
...
複製程式碼

關於 CSS margin,一些讓你模糊的點

display: flow-root 是CSS3新出來的一個屬性,用來建立一個無副作用的 BFC。將overflow屬性的值設為auto也會產生同樣的效果,因為這也建立了一個新的BFC,儘管它也可能建立一些在某些場景中不需要的滾動條。

flex 和 grid 容器

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

還是以上面的例子為例,將 wrapper 改用 flex 佈局:

...
.wrapper {
  outline: 1px solid red;
  display: flex;
  flex-direction: column;
}
...
複製程式碼

關於 CSS margin,一些讓你模糊的點

網站 margin 策略

由於margin 會重疊,最好能找到一種一致的方法來處理網站的 margin。最簡單的方法是隻在元素的頂部或底部定義 margin。這樣,就很少會遇到 margin 重疊的問題,因為有margin的邊總是與沒有margin的邊相鄰。

這個解決方案並不能解決你可能遇到的問題,因為子元素的margin會與父元素相互重疊。這個特定的問題往往不那麼常見,但知道它為什麼會發生可以幫助你想出一個解決方案。

對此,一個理想的解決方案是給元素設定 display: flow-root,但有的瀏覽器並不支援,可以使用overflow建立BFC、或將父元素設定成flex容器,當然還可以設定padding來解決。

百分比 margin

當你在CSS中使用百分比的時候,它必須是某個元素的百分比。使用百分比設定的 margin(或 padding)始終是父元素內聯大小(水平寫入模式下的寬度)的百分比。這意味著在使用百分比時,元素周圍的padding大小都是相同的。

在下面的示例中,有一個200px 寬的 d當,裡面是一個類名為 boxdiv,它的 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;
}
複製程式碼

關於 CSS margin,一些讓你模糊的點

我們在本文中一直在討論垂直 margin ,然而,現代CSS傾向於以相對於流的方式而不是物理方式來考慮事情。因此,當我們討論垂直邊距時,我們實際上是在討論塊維度的邊距。如果我們在水平寫作模式下,這些 margin 將是頂部和底部,但在垂直寫作模式下,這些 margin 將是右側和左側。

一旦使用邏輯的、流相關的方向,就更容易討論塊的開始和結束,而不是塊的頂部和底部。為了簡化這一過程,CSS引入了邏輯屬性和值規範。這將流的相關屬性對映到物理屬性上。

  • margin-top = margin-block-start
  • margin-right = margin-inline-end
  • margin-bottom = margin-block-end
  • margin-left = margin-inline-start

還有兩個新的快捷鍵,可以同時設定兩個塊或者兩個內嵌塊。

  • margin-block
  • margin-inline

在下面示例中,使用了這些流相關關鍵字,然後更改了盒子的編寫模式,你可以看到 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;
}
複製程式碼

關於 CSS margin,一些讓你模糊的點

需要了解更多,可以閱讀有關MDN上的邏輯屬性和值的更多資訊。

程式碼部署後可能存在的BUG沒法實時知道,事後為了解決這些BUG,花了大量的時間進行log 除錯,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug

交流(歡迎加入群,群工作日都會發紅包,互動討論技術)

乾貨系列文章彙總如下,覺得不錯點個Star,歡迎 加群 互相學習。

github.com/qq449245884…

我是小智,公眾號「大遷世界」作者,對前端技術保持學習愛好者。我會經常分享自己所學所看的乾貨,在進階的路上,共勉!

關注公眾號,後臺回覆福利,即可看到福利,你懂的。

關於 CSS margin,一些讓你模糊的點

相關文章