本文目錄導讀：

1. 使用margin屬性
2. 使用padding屬性

CSS技巧：圖片周圍添加邊距的方法

在網(wǎng)頁設計中，我們經常需要將圖片嵌入到頁面中，并且希望圖片周圍有一定的邊距，以增加視覺效果和頁面美觀度，下面介紹幾種使用CSS來實現(xiàn)圖片周圍添加邊距的方法。

使用margin屬性

CSS中的margin屬性可以用來設置元素的外邊距，包括圖片周圍的空間，通過給圖片元素添加margin屬性，可以輕松實現(xiàn)圖片與頁面邊緣之間的間距。

img {
  margin-top: 20px; /* 上邊距 */
  margin-right: 30px; /* 右邊距 */
  margin-bottom: 20px; /* 下邊距 */
  margin-left: 30px; /* 左邊距 */
}

通過設置不同的margin值，可以調整圖片與頁面邊緣之間的距離。

使用padding屬性

除了使用margin屬性外，還可以使用CSS中的padding屬性來設置圖片內部的邊距，padding屬性用于設置元素邊框與元素內容之間的空間。

img {
  padding-top: 20px; /* 圖片頂部內邊距 */
  padding-right: 30px; /* 圖片右側內邊距 */
  padding-bottom: 20px; /* 圖片底部內邊距 */
  padding-left: 30px; /* 圖片左側內邊距 */
}

通過設置padding屬性，可以在圖片內部增加空間，從而達到與頁面邊緣產生距離的效果。

三、使用border屬性結合box-sizing屬性

除了直接使用margin和padding屬性外，還可以通過設置邊框和box-sizing屬性來實現(xiàn)圖片周圍添加邊距的效果。

img {
  border: 10px solid transparent; /* 設置邊框寬度和樣式 */
  box-sizing: border-box; /* 將邊框包含在元素的總寬度和高度內 */
}

通過設置邊框和box-sizing屬性，可以在圖片周圍添加透明的邊框，從而實現(xiàn)與頁面邊緣產生距離的效果，這種方法適用于需要保持圖片原始尺寸不變的情況下添加邊距。

通過CSS中的margin、padding和border屬性，可以輕松實現(xiàn)圖片周圍添加邊距的效果，在實際應用中，可以根據(jù)需要選擇適合的方法來實現(xiàn)所需的視覺效果。