「margin : atuo」與「margin : 0 auto」 有什麼差別?
更新日期: 2024 年 9 月 14 日
乳題,我在學習如何將元素置中時,發現有兩種語法同樣都能達成一樣的效果,分別是以下兩樣。
第一種方法
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」有一樣的效果。
以上就是我的理解,我們下次見。