把所有網(wǎng)頁上的對象都放在一個(gè)盒（box）中 ，設(shè)計(jì)師可以通過創(chuàng)建定義來控制這個(gè)盒的屬性，這些對象包括段落、列表、標(biāo)題、圖片以及層。
盒模型主要定義四個(gè)區(qū)域：
內(nèi)容（content）
內(nèi)邊距（padding）
邊框（border）
外邊框（margin）

margin層的邊框以外留的空白
background-color背景顏色
background-image背景圖片
padding層的邊框到層的內(nèi)容之間的空白
border邊框
content內(nèi)容

margin和padding的屬性
margin:

包括margin-top,margin-right,margin-bottom,margin-left
控制塊級元素之間的距離 他們是透明不可見的
根據(jù)上右下左的順時(shí)針規(guī)則，可以寫為
margin: 40px 40px 40px 40px;

當(dāng)上下，左右margin值分別一致的時(shí)候，可簡寫為
margin: 40px 40px;

當(dāng)上下左右margin值都一致的時(shí)候，可寫為
margin: 40px;

padding
包括padding-top,padding-right,padding-bottom,padding-left
控制塊級元素內(nèi)部 content與border之間的距離

詳細(xì)說明：
如果只提供一個(gè)，將用于全部的四條邊
如果只提供兩個(gè)，第一個(gè)用于上下，第二個(gè)用于左右
如果提供三個(gè)，第一個(gè)用于上，第二個(gè)用于左右，第三個(gè)用于下
如果提供四個(gè)，第一個(gè)用于上，第二個(gè)用于右，第三個(gè)用于下，第四個(gè)用于左
padding: 36px; //對象四邊的補(bǔ)丁邊距均為36px
padding: 36px 24px; //上下兩邊的補(bǔ)丁邊距為36px，左右兩邊的補(bǔ)丁邊距為24px
padding: 36px 24px 18px; //上、下兩邊的補(bǔ)丁邊距分別為36px、18px，左右兩邊的補(bǔ)丁邊距為24px
padding: 36px 24px 18px 12px; //上、右、下、左補(bǔ)丁邊距分別為36px、24px、18px、12px

" margin: 0 atuo ; "
表示上下邊界為0，左右則根據(jù)寬度自適應(yīng)相同值（即水平居中）

auto值：用于設(shè)置瀏覽器邊距。這樣做的結(jié)果會依賴于瀏覽器，根據(jù)寬度自適應(yīng)相同值

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的CSS padding margin border属性讲解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。