2014-10-07 187 views
12

我檢查了MDN,看看有什麼方法可以有一個保證金屬性的自動值,它說:「汽車是取代某個合適的值,例如它可以用於塊的居中。margin auto是什麼意思?

但這是什麼合適的價值,適合什麼?

我想我自己的一些實驗,我發現如果我添加保證金左:自動,容器去右(就像漂浮到右):

#container { 
    background: red; 
    width: 120px; 
    margin-left: auto; 
} 

http://jsfiddle.net/sph2j6jx/

不這意味着增加margin auto實際上就像「佔用所有可用空間」一樣?並且,當您添加左右邊距時,它會將div放在中間,因爲它會嘗試從左側和右側獲取所有空間?

+0

定義margin-right:auto;就像這樣http://jsfiddle.net/sph2j6jx/1/ – 2014-10-07 07:40:11

+4

你的暗示是正確的。 – 2014-10-07 07:44:40

回答

7

汽車利潤率

根據情況,提供自動值指示 瀏覽器根據其 自己的樣式表提供的值來渲染邊距。但是,如果將這樣的邊距應用於具有有意義寬度的元素 ,則自動邊距會導致所有可用空間都呈現爲空白。

w3.org

+0

「根據具體情況,提供自動值會指示瀏覽器根據其自己的樣式表中提供的值提供保證金。」嗯,聽起來不太可能。在作者想要的情況下會很有趣。 – Alohci 2014-10-07 08:26:55

+0

有意義的寬度是什麼意思? – MattGoldwater 2017-08-09 22:50:31

4

的值,所述特性爲根據內容或元素的上下文調整自動

例如,height: auto的塊級元素將隨着它包含更多文本而變長。再例如,一個帶有margin: 0 auto的塊元素將增加左右邊距,直到它沿着視口的y軸居中。

它確實取決於您賦予的值,不同的屬性根據內容和上下文的不同而表現不同。

參考 - What is the meaning of `auto` value in a CSS property.

1
#main { 
    width: 600px; 
    margin: 0 auto; 
} 

<div id="main">設置塊級元素的寬度會阻止它伸出到其容器的左側和右側的邊緣。然後,您可以將左右邊距設置爲自動,以便將該元素在其容器內水平居中。該元素將佔用您指定的寬度,然後剩餘空間將平均分配到兩個邊距之間。 </div>