原文:www.smashingmagazine.com/2019/07/mar…
譯者:前端小智
為了保證的可讀性,本文采用意譯而非直譯。
當我們學習CSS時,我們大多數人學到的第一件事是CSS中盒子的各個部分的細節,這部分通過叫做 CSS盒、模型。“盒模型”中的元素之一是margin
,即盒子周圍的透明區域,它會將其他元素從盒子內容中推開。
CSS1中描述了 margin-top
、margin-right
、margin-bottom
和margin-left
屬性,以及一次設定所有四個屬性的簡寫 margin
。
margin
看起來是一個相當簡單的事情,但是,在本文中,我們們將看一些在使用margin
一些讓人迷惑有有趣的事情。 特別是,margin
之間如何相互作用,以及 margin
重疊效果。
想閱讀更多優質文章請猛戳GitHub部落格,一年百來篇優質文章等著你!
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定義。
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
<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;
}
複製程式碼
執行效果:
完全空盒子
如果一個盒子是空的,那麼它的頂部和底部 margin
可能會相互重疊。在下面的示例中,class
為empty
的元素的頂部和底部 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;
}
複製程式碼
執行效果:
父元素和第一個或最後一個子元素
margin 重疊讓人猝不及防,因為它有時候不是很直觀。在下面的示例中,有一個類名為 wrapper
的div
,給這個div一個紅色的outline
,這樣就可以看到它在哪裡了。
這個div
裡面的三個子元素的 margin
都是50px
。但是你會發現實際的效果是第一項和最後一項與父元素的的margin
齊平,好像子元素和父元素之間沒有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;
}
複製程式碼
執行效果:
這是因為子節點上的margin
會隨著父節點上的任何一邊的margin
相互重疊,從而最終位於父節點的外部。如果使用DevTools檢查第一個子元素,就可以看到這一點,顯示的黃色區域就是是 margin
。
僅塊元素 margin 重疊
在CSS2中,只指定垂直方向的 margin
重疊,即元素的頂部和底部 margin。因此,上面的左右邊距不會重疊。
值得注意的,margin 只在塊的方向上重疊,比如段落之間。
阻止 margin 重疊
如果一個元素是絕對的定位,或者是浮動的,那麼它的margin
永遠不會重疊。然而,假設你遇到了上面示例中的幾種情況,那麼如何才能阻止 margin 重疊呢?
例如,一個完全空的盒子,如果它有border
或padding
,它的上下 margin
就不會重疊。在下面的例子中,給這個空盒子新增了1px的padding
。現在這個空盒子的的上方和下方都有一個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;
}
複製程式碼
執行效果:
這背後是有邏輯,如果盒子是完全空的,沒有border
或padding
,它基本上是不可見的。 它可能是CMS中標記為空的段落元素。 如果你的CMS新增了多餘的段落元素,你可能不希望它們在其他段落之間造成較大的空白,這時 margin 重疊就有一定的意義。
對於父元素和第一個或最後一個子元素 margin 重疊,如果我們向父級新增border
,則子級上的margin
會保留在內部。
...
.wrapper {
border: 5px dotted black;
}
...
複製程式碼
同樣,這種行為也有一定的邏輯。如果出於語義目的而對元素進行包裝,但這些元素不顯示在螢幕上,那麼你可能不希望它們在顯示中引入大的 margin
。當web主要是文字時,這很有意義。當我們使用元素來佈局設計時,它的重疊行為就沒有多大的意義了。
建立格式化上下文(BFC)
BFC(Block Formatting Context)格式化上下文,是Web頁面中盒模型佈局的CSS渲染模式,指一個獨立的渲染區域或者說是一個隔離的獨立容器。
BFC 可以阻止邊距的重疊。 如果我們再看父元素和第一個或最後一個子元素的示例,可以在 wrapper 元素加上 display: flow-root
就會建立一個新的BFC,從而阻止 margin
合併
...
.wrapper {
outline: 1px solid red;
display: flow-root;
}
...
複製程式碼
display: flow-root
是CSS3新出來的一個屬性,用來建立一個無副作用的 BFC。將overflow
屬性的值設為auto
也會產生同樣的效果,因為這也建立了一個新的BFC,儘管它也可能建立一些在某些場景中不需要的滾動條。
flex 和 grid 容器
flex
和 grid
容器為其子元素建立flex
和grid
格式化上下文,因此它們也能阻止 margin
的重疊。
還是以上面的例子為例,將 wrapper 改用 flex 佈局:
...
.wrapper {
outline: 1px solid red;
display: flex;
flex-direction: column;
}
...
複製程式碼
網站 margin 策略
由於margin
會重疊,最好能找到一種一致的方法來處理網站的 margin
。最簡單的方法是隻在元素的頂部或底部定義 margin
。這樣,就很少會遇到 margin 重疊的問題,因為有margin
的邊總是與沒有margin
的邊相鄰。
這個解決方案並不能解決你可能遇到的問題,因為子元素的margin
會與父元素相互重疊。這個特定的問題往往不那麼常見,但知道它為什麼會發生可以幫助你想出一個解決方案。
對此,一個理想的解決方案是給元素設定 display: flow-root
,但有的瀏覽器並不支援,可以使用overflow
建立BFC
、或將父元素設定成flex
容器,當然還可以設定padding
來解決。
百分比 margin
當你在CSS中使用百分比的時候,它必須是某個元素的百分比。使用百分比設定的 margin(或 padding)始終是父元素內聯大小(水平寫入模式下的寬度)的百分比。這意味著在使用百分比時,元素周圍的padding
大小都是相同的。
在下面的示例中,有一個200px 寬的 d當,裡面是一個類名為 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;
}
複製程式碼
我們在本文中一直在討論垂直 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;
}
複製程式碼
需要了解更多,可以閱讀有關MDN上的邏輯屬性和值的更多資訊。
程式碼部署後可能存在的BUG沒法實時知道,事後為了解決這些BUG,花了大量的時間進行log 除錯,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
交流(歡迎加入群,群工作日都會發紅包,互動討論技術)
乾貨系列文章彙總如下,覺得不錯點個Star,歡迎 加群 互相學習。
我是小智,公眾號「大遷世界」作者,對前端技術保持學習愛好者。我會經常分享自己所學所看的乾貨,在進階的路上,共勉!
關注公眾號,後臺回覆福利,即可看到福利,你懂的。