使用 CSS 來設置圖片上的間距是一個常見的網頁設計任務。在這里，我們將通過 pre 標簽展示樣例代碼和解釋說明來幫助你學習該技能。

img {
margin-top: 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}

上述代碼使用了圖片的 margin 屬性來設置圖片上的間距。屬性定義如下：

• margin-top: 20px - 設置圖片頂部與周圍元素的距離為 20 像素。
• margin-bottom: 20px - 設置圖片底部與周圍元素的距離為 20 像素。
• margin-left: auto - 將圖片與周圍元素之間的左邊距歸零，并將其水平居中。
• margin-right: auto - 將圖片與周圍元素之間的右邊距歸零，并將其水平居中。

你可以根據你的需要來調整這些值。例如，如果你想增加圖片與周圍元素的距離，你可以將數值增加到 40 像素或更多。

此外，你還可以將這種代碼應用于不同類型的元素。例如，你可以將這種間隔應用于單個段落或某個頁面區域的所有內容。

在許多情況下，將圖像放置于一個容器內可能是更佳的方法。這可以幫助你更好地控制其尺寸和位置。你可以在該容器中使用一個 margin 屬性來設置圖片的間距。

希望這篇文章能夠幫助你更好地理解 CSS 圖片上的間距，并為你的網頁設計提供一些有價值的技巧。祝你好運！