「margin : atuo」與「margin : 0 auto」 有什麼差別?


Posted by strangedog on 2021-04-08

乳題,我在學習如何將元素置中時,發現有兩種語法同樣都能達成一樣的效果,分別是以下兩樣。

第一種方法
margin:auto


第二種方法
margin:0 auto

經過搜尋,我發現了兩者之間還是有些微的差距,這種差別源自於 margin 元素的「複合屬性」。

「複合屬性」的特色在於,它的屬性值可以分割成更小部份的屬性值,我們可以想像成「複合屬性」是「單一屬性」的聚合體。

舉例而言,「地址」就是一個複合屬性。它是由「xx縣」、「xx市」、「xx街」、「xx號」這四種單一屬性的組合體。

因此,margin 本身其實也是四個屬性的聚合體,分別由「margin-top」、「margin-bottom」、「margin-left」、「margin-right」,簡單來講就是「上」、「下」、「左」、「右」四個方向的組合體。

因為複合屬性的特性,margin 也會具有四種由繁到簡的寫法。

1.四值法,四個值都呈現出來,依序為上、右、下、左
margin: 10px 20px 30px 40px;

2.三值法,只呈現三個值,依序為上、左右、下
margin: 10px 20px 30px;

3.二值法,只呈現兩個值,依序為上下、左右
margin: 10px 20px;

4.一值法,只呈現一個值,同時設定上下左右方向
margin: 10px;

根據以上的結果,我們可以得知推論

margin:auto 為一值表示法,經過拆解後可得到以下的程式

margin:auto;

可以拆解為以下程式

margin: auto auto auto auto;

再拆解為以下程式

margin-top: auto;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;

margin:0 auto 則為二值法,經過拆解可得到以下的程式

margin:0 auto;

可以拆解為以下程式

margin: 0 auto 0 auto;

再拆解為以下程式

margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;

我們將兩者拆解後的結果進行對比,可以發現差別在於兩條程式

margin-top: auto;
margin-bottom: auto;

與

margin-top: 0;
margin-bottom: 0;

再經過查對資料,我們可以發現 html 對於「margin-top」與「margin-bottom」的 auto 值預設為 0 。

經過以上的逐步推論,我們就能了解為何「margin : atuo」與「margin : 0 auto」有一樣的效果。

以上就是我的理解,我們下次見。










Related Posts

2017,讓我們再來看看 Web Components 吧!

2017,讓我們再來看看 Web Components 吧!

物件導向、原型鍊、this 淺淺談

物件導向、原型鍊、this 淺淺談

[ 紀錄 ] 實戰練習 - 抽獎程式 (以 Express 實作後端 API )

[ 紀錄 ] 實戰練習 - 抽獎程式 (以 Express 實作後端 API )


Comments