在 HTML 和 CSS 中，留白指的是元素周圍的空白區域。調整留白可以透過兩個主要屬性進行控制：

margin：控制元素外部的空白（元素與其他元素之間的距離）。
padding：控制元素內部的空白（內容與元素邊框之間的距離）。
margin 和 padding 的使用
這兩個屬性可以用不同的方式進行設置：

單一值設定：對四個方向應用相同的空白距離。

margin: 20px; 
padding: 10px; 

四個值設定：分別設置上、右、下、左的距離，依序為：上（top）、右（right）、下（bottom）、左（left）

margin: 10px 15px 20px 25px;
padding: 5px 10px 15px 20px; 

兩個值設定：第一個值設置上下，第二個值設置左右。

margin: 20px 10px; 
padding: 15px 5px; 

三個值設定：當使用三個值時，第一個值設置上，第二個設置左右，第三個設置下。

margin: 10px 20px 30px; 
padding: 5px 15px 10px; 

使用範例
HTML:

<div class="box">內容</div>

CSS:

.box {
  width: 200px;
  height: 100px;
  background-color: lightblue;

  margin: 20px; 
 
  padding: 10px; 
}

margin 與 padding 的縮寫方式
margin 與 padding 的縮寫可以分別針對上、右、下、左來單獨設定：

margin-top: 設置元素的上方留白
margin-right: 設置元素的右方留白
margin-bottom: 設置元素的下方留白
margin-left: 設置元素的左方留白

.box {
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 20px;
  margin-left: 25px;
}

同樣地，padding 也可以分別設置 padding-top、padding-right、padding-bottom 和 padding-left。

自動調整 (auto) 和百分比 (%)
margin: auto：用於水平居中一個塊級元素，如 div，當其寬度設定後，使用 auto 可以讓它水平居中

.box {
  width: 200px;
  margin: 0 auto; 
}

百分比值：可以用百分比來設置 margin 和 padding，其值是相對於元素的父元素的寬度。

.box {
  padding: 5%; 
}