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
(本篇完)