Css盒模型屬性詳解（margin和padding）

Css盒模型屬性詳解（margin和padding）

 

你們好,我是逆戰班的一名學員,今天我來給你們分享一下關於盒模型的知識!

關於盒模型的屬性詳解及用法

盒模型基本屬性有兩個：padding和margin。

以邊框border爲界，邊框裏面是內邊距，邊框外面是外邊距。

1.內邊距padding：如上圖，若是父元素設置了邊框，內邊距是指235*240大小的內容區與邊框之間的距離，無論父元素是否設置邊框，更準確地說，內邊距能夠控制父元素和子元素或者元素和內容之間的距離（元素相對於內容來講也是父元素），padding屬性要加在父元素的css屬性裏。padding值會把元素原有大小撐大，若是想讓元素維持原有大小，必定要在元素寬高上減去所加padding值。

 

padding的複合式寫法：

padding：10px；（表示元素上下左右內邊距都是10px）

padding：10px 10px；（表示元素上下內邊距是10px，左右內邊距是10px）

padding：10px 10px 10px；（表示元素上內邊距是10px，左右內邊距是10px，下內邊距是10px）

padding：10px 10px 10px 10px；（表示元素上內邊距是10px，右內邊距是10px，下內

邊距是10px，左內邊距是10px）

 

padding的分開式寫法：

padding-top: 10px;（表示元素上內邊距是10px）

padding-right: 10px;（表示元素右內邊距是10px）

padding-bottom: 10px;（表示元素下內邊距是10px）

padding-left: 10px;（表示元素左內邊距是10px）

 

 2.外邊距margin：如上圖，若是父元素設置了邊框，外邊距是指邊框之外與其餘同輩元素之間的距離，無論父元素是否設置邊框，更準確地說，外邊距能夠控制同輩元素之間的距離。

margin值不會撐大元素原有大小，但會增長它所佔區域。上下兩個元素之間的的margin值會重疊顯示，取兩個值中最大的值。左右margin值不會疊加。

 

margin的複合式寫法：

margin：10px；（表示元素上下左右外邊距都是10px）

margin：10px 10px；（表示元素上下外邊距是10px，左右外邊距是10px）

margin：10px 10px 10px；（表示元素上外邊距是10px，左右外邊距是10px，下外邊距是10px）

margin：10px 10px 10px 10px；（表示元素上外邊距是10px，右外邊距是10px，下外

邊距是10px，左外邊距是10px）

 

margin的分開式寫法：

margin-top: 10px;（表示元素上外邊距是10px）

margin-right: 10px;（表示元素右外邊距是10px）

margin-bottom: 10px;（表示元素下外邊距是10px）

margin-left: 10px;（表示元素左外邊距是10px）