所謂盒子模型，在網頁用邊距、邊框、內距、內容，而且CSS排版是網頁開發基礎概念

width

設定元素内容 寬度

• max-width寬度最大值
• min-width寬度最小值

height

設定元素內容 高度

• max-height寬度最大值
• min-height寬度最小值

單位

div.box1 {
    background-color: blueviolet;
    width:100%;
    height:auto;
} 

div.box1 {
    background-color: blueviolet;
    width:100vw;
    height:100vh;
}

Box-Sizing

控制 元素總寬度和高度 計算方式

• content-box

是預設值，元素寬度和高度是 內容大小計算，邊框、內邊距寬度和高度被加到內容寬度和高度 得到元素總寬度和高度

• border-box

元素寬度和高度是 邊框和內邊距大小計算 內容寬度和高度被加到邊框、內邊距寬度和高度 得到元素總寬度和高度

.box {
  width: 100px;
  height: 100px;
  border: 10px solid red;
  padding: 10px;
  box-sizing: content-box;
}

.box {
  width: 100px;
  height: 100px;
  border: 10px solid red;
  padding: 10px;
  box-sizing: border-box;
}

盒子模型

(圖片:自己做的)

內邊距(padding)

邊框與內容之間距離

• padding-top：内容區上方内邊距
• padding-right：内容區右邊内邊距
• padding-bottom：内容區下方内邊距
• padding-left：内容區左邊内邊距

外邊距(margin)

元素周圍空間

• margin-top：元素上方外邊距
• margin-bottom：元素下方外邊距
• margin-right：元素右邊外邊距
• margin-left：元素左邊外邊距

邊框(border)

元素周圍線條，元素內容和外邊距之間距離

• border-style：邊框樣式
• border-width：邊框寬度
• border-color：邊框顏色

邊框顏色

p {
    border-color: blue;
    border-width: 5px;
    border-style: solid;
}

邊框寬度

p {
    border-width: 5px;
    border-style: solid;
}

邊框樣式

有很多樣式可以使用，舉例幾個

Solid	實線
Dashed	虛線
Dotted	點線
Double	雙線
Groove	凹槽
Ridge	凸槽
Inset	內陰影
Outset	外陰影

Margin Border Padding參數設定

可以設定１～４個參數

(圖片:自己做的)

div.box1 {
    background-color: peru;
    margin: 5px 10px 6px 3px;
}
div.box2 {
    background-color: orange;
    padding: 3px 6px 4px;
} 
div.box3 {
    background-color: orchid;
    border: 5px 6px;
}
div.box4 {
    background-color: palevioletred;
    margin: 4px;
}

資料來源:CSS語法