把所有網頁上的對象都放在一個盒（box）中 ，設計師可以通過創建定義來控制這個盒的屬性，這些對象包括段落、列表、標題、圖片以及層。
盒模型主要定義四個區域：
內容（content）
內邊距（padding）
邊框（border）
外邊框（margin）

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

margin和padding的屬性
margin:

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

當上下，左右margin值分別一致的時候，可簡寫為
margin: 40px 40px;

當上下左右margin值都一致的時候，可寫為
margin: 40px;

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

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

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

auto值：用于設置瀏覽器邊距。這樣做的結果會依賴于瀏覽器，根據寬度自適應相同值

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。