CSS margin-inline和margin-block區別是什麼？
byzhangxinxu from ofollow,noindex" target="_blank">https://www.zhangxinxu.com/wordpress/?p=8132
本文可全文轉載，個人部落格無需授權，只要保留原作者、出處以及文中連結即可，任何網站均可摘要聚合，商用請聯絡授權。
一、瞭解CSS邏輯屬性
所謂CSS邏輯屬性，指的是 *-start ， *-end 以及 *-inline-start ， *-inline-end ， *-block-start ， *-block-start 這類CSS屬性，其最終渲染的方向是有邏輯性在裡面的。
例如 margin-left 方向是固定的，就左側間距，沒有邏輯；但是， margin-start 有可能是左間距，也有可能是右間距，例如，對於內聯元素，如果 direction 屬性值是 rtl ，則 margin-start 的表現等同於 margin-right ，如果屬性值是 ltr ，則 margin-start 的表現等同於 margin-left ，就表現出了邏輯判斷在裡面，因此，成為CSS邏輯屬性。
// zxx: 如果對 direction 屬性不是很瞭解，可以參考這篇文章“ CSS direction屬性簡介與實際應用 ”。
CSS邏輯屬性很多，包括： block-size ， border-block-end ， border-block-end-color ， border-block-end-style ， border-block-end-width ， border-block-start ， border-block-start-color ， border-block-start-style ， border-block-start-width ， border-inline-end ， border-inline-end-color ， border-inline-end-style ， border-inline-end-width ， border-inline-start ， border-inline-start-color ， border-inline-start-style ， border-inline-start-width ， inline-size ， inset-block-end ， inset-block-start ， inset-inline-end ， inset-inline-start ， margin-block-end ， margin-block-start ， margin-inline-end ， margin-inline-start ， max-block-size ， max-inline-size ， min-block-size ， min-inline-size ， padding-block-end ， padding-block-start ， padding-inline-end ， padding-inline-start 。
標題所提到的 margin-inline 和 margin-block 也是CSS邏輯屬性，前者是 margin-inline-start 和 margin-inline-end 的縮寫，後者是 margin-block-start 和 margin-block-end 的縮寫。
二、margin-inline和margin-block的區別
CSS邏輯屬性瀏覽器支援還算早，例如 text-align-start 和 text-align-end ，以及我沒記錯的話，之前Chrome版本還有非標準的 -webkit-margin-before 和 -webkit-margin-end 。然後最近的Chrome版本69完全支援CSS邏輯屬性後，去掉了。參見下面截圖純綠色部分：
對於 margin 這種4個方向都可以生效的元素而言， *-start ， *-end 這種設計是有侷限的，一旦使用 writing-mode 屬性改變水平流為垂直流，則 *-start 就會和 *-top 發生衝突。而標準的CSS邏輯屬性增加了 inline 和 block 一層區分，則就沒有這個問題。
瞭解margin-inline和margin-block
乍一看，我們可能會誤認為 margin-inline 是對inline元素生效的， margin-block 是對block元素生效的。實際上不是的，千萬不要被表面迷惑，inline和block其實指的是方向。
在CSS世界中，inline元素的排列預設是水平的，從左往右，block元素的排列是垂直的，從上往下。
所以，在中文或英文網頁環境中，預設情況下， margin-inline 指的是水平方向的 margin 控制，而 margin-block 指的是垂直方向的 margin 控制。
一圖勝千言，一例勝千圖，您可以狠狠地的點選這裡： 預設margin-inline-start和margin-block-start表現demo
上下兩個元素，分別設定CSS如下：
.inline-start {
margin-inline-start: 40px;
}
.block-start {
margin-block-start: 40px;
}
結果如下截圖：
可以看到，設定 margin-inline-start:40px 的元素其樣式表現等同於 margin-left:40px ，因為此時文字這個inline元素的排版方向是左→右，因此 inline-start 是左left。
類似的，設定 margin-block-start:40px 的元素，其block元素此時的排版方向是上↓下，因此 block-start 是上top。最終樣式表現等同於 margin-top:40px 。
下面，我們設定兩個元素 direction:rtl ，則表現如下：
inline元素的排版方向變成了右→左，因此， margin-inline-start:40px 這裡的 start 指的就是 right ，由此右間距 40px 。
writing-mode 屬性可以改變block元素的排版方向，從垂直變成水平，因此，設定兩個元素 writing-mode:vertical-lr ，兩元素效果表現如下截圖：
// zxx: 如果對 writing-mode 屬性不是很瞭解，可以參考這篇文章“ 改變CSS世界縱橫規則的writing-mode屬性 ”。
提示：demo頁面提供了切換按鈕，大家可以自行親自感受佈局的變化。
margin-inline和margin-block的區別是什麼？
margin-inline 和 margin-block 的區別在於， 一個表示 inline 元素排版方向，一個表示 block 元素排版方向。
三、結束語
除了 direction 和 writing-mode 這兩個CSS屬性， text-orientation 也是可以影響 *-inline-start ， *-inline-end ， *-block-start ， *-block-start 這些CSS屬性的定位的。
text-orientation 是一個比較新的CSS3屬性，IE包括Edge18都尚未支援。其作用可以讓英文字母都豎著同時垂直排列（見下截圖）， writing-mode 只能讓東亞語言豎排。
這個以後有機會再深入講解。
好，本文就到這裡，感謝閱讀，歡迎交流。
本文為原創文章，會經常更新知識點以及修正一些錯誤，因此轉載請保留原出處，方便溯源，避免陳舊錯誤知識的誤導，同時有更好的閱讀體驗。
本文地址： https://www.zhangxinxu.com/wordpress/?p=8132
（本篇完）