2016-01-06 166 views
0

爲什麼添加一些填充會影響DIV框外的元素?填充不應該在DIV的邊框和內部的之間創建一些空格嗎?如何在不影響DIv框外的元素的情況下創建這個空間?DIV內的填充

回答

6

如何在不影響 DIv框外的元素的情況下創建此空間?

使用box-sizing: border-box

MDN

邊界框 width和height屬性包括padding和 邊界,而不是利潤率。

該屬性必須設置的原因是因爲默認box-sizing的值是content-box。再次來自MDN:

content-box這是CSS標準指定的默認樣式。測量寬度和高度屬性僅包含 的內容,但不包括填充,邊框或邊距。

1

假設你已經指定了一個內容heightwidth,然後padding將被放置周圍這一點。這將邊界向外移動。這向外移動邊距。這將推動附近的元素。

您可以通過減少height和/或width補償或使用box-sizing屬性,以使heightwidth確定的邊界,而不是內容的外邊緣的外邊緣之間的距離改變它。

1

嘗試尋找到box-sizing財產...

https://css-tricks.com/box-sizing/

今天,所有的瀏覽器的最新版本使用原來的「寬度或高度 +填充+邊框=實際寬度或高度」盒模型。使用 box-sizing:border-box ;,我們可以將box模型更改爲原來的 「古怪」的方式,其中元素的指定寬度和高度不是由填充或邊框影響的 。這在 響應式設計中被證明非常有用,它被發現進入重置樣式。

你後的值是border-box

.class { 
    box-sizing: border-box; 
}