文：https://www.smashingmagazine.com/2019/07/margins-in-css/

譯者：前端小智

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

為了回饋讀者，《大遷世界》不定期舉行(每個月一到三次)，現金抽獎活動，保底200，外加用戶贊賞，希望你能成為大遷世界的小錦鯉，快來試試吧

當我們學習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，歡迎 加群 互相學習。

https://github.com/qq449245884/xiaozhi

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

關注公眾號，后臺回復福利，即可看到福利，你懂的。

SS樣式優先權

1.寫法優先權

優先級依次是：行內樣式表 > 內部樣式表> 外部樣式表。

2.選擇符優先權

對于id 與 class 而言，id的定義優先于class 的定義。具有class屬性的比沒有class屬性的優先權要大。

id > class > 類型選擇符

樣式繼承

1.HTML 中的子標簽會繼承部分父標簽的樣式。

如: body { color:#ff0000;}那么頁面中,body之下的所有標簽及標簽下的所有子標簽的文本都將變成紅色。

2. !important

在兩行相同類型的css樣式定義中，往往優先執行后面一個;

p{font-size:14px;font-size:20px;}

但是可以通過!important 語法，提升某一句樣式表的重要性，使及優先執先 !important標注的語句。

p{font-size:14px !important;font-size:20px;}

css 代碼注釋，以 /* 開始 */ 結束。

如：/* body樣式*/

body { margin:0px; padding:0px;}

/*LOGO樣式*/

#logo{ ……}

/*導航樣式結束*/

字體樣式

1.字體

font-family設置文字名稱，可以使用多個名稱，或者使用逗號

分隔，瀏覽器則按照先后順序依次使用可用字體。

例：Arial

p { font-family:'宋體'，'黑體'}

2.字號

font-size設置文字的尺寸

例：p { font-size:14px;}

3.字體加粗

font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

例：p { font-weight:bold;}

4.斜體

font-style : normal | italic | oblique

例：p { font-style: normal; }

p { font-style: italic; }

p { font-style: oblique; }

5.下劃線控制

text-decoration : none || underline || blink || overline || line-through

例：

p { text-decoration:overline;}

p { text-decoration:underline;}

p { text-decoration:line-through;}

6.字體樣式縮寫

font : font-style || font-variant || font-weight || font-size || line-height || font-family

例：

P {

font-style:italic;

font-weight:bold;

font-size:14px;

line-height:22px;

font-family:宋體;

}

也可以縮寫的形式：

p { font:italic bold 14px/22px 宋體}

1.行高

line-height : normal | length

例：p{ line-height:25px;} p{ line-height:150%}

2.段落縮進

text-indent : length; p{ text-indent:4px;}

3.段落對齊

text-align : left | right | center | justify

對于text-aligh,不但是文本，對象中的其它元素也能夠被text-align進行對齊方式的設置。

例：

p { text-align:right;}

p { text-align:center;}

4.文字間距

letter-spacing : normal | length

p{ letter-spacing:5px;}

關于margin外邊距和padding內邊距會在下一章中講到。