Box Model 設計-內外邊距

陳育霖

Margin 外邊距設計

1. h1 {
   
2.   margin-top: 20px;
   
3.   margin-right: 30px;
   
4.   margin-left: 40px;
   
5.   margin-bottom: 50px;
   
6. }

複製代碼

margin: 上|右|下|左

1. h1{ margin: 20px 30px 40px 50px}

複製代碼

注意: 外邊距相遇時，會自動合併，取最大值的那個

Margin 內邊距設計

1. h1 {
   
2.   padding-top: 20px;
   
3.   padding-right: 30px;
   
4.   padding-left: 40px;
   
5.   padding-bottom: 50px;
   
6. }

複製代碼

padding: 上|右|下|左

1. h1{ padding: 20px 30px 40px 50px}

複製代碼

注意:
四個值：上、右、下、左
三個值：上、左右、下
兩個值：上下、左右
一個值：上下左右