在網(wǎng)頁設(shè)計中，經(jīng)常需要添加圖片來補充內(nèi)容，使頁面更加豐富和生動。然而，有時候圖片與文字之間的間距過大或過小，會讓網(wǎng)頁顯得不協(xié)調(diào)，影響用戶體驗。本文將介紹如何利用CSS設(shè)置圖片上下間距，使網(wǎng)頁布局更加美觀。

首先，我們需要了解CSS中用于設(shè)置上下間距的屬性是什么。答案是margin（外邊距）和padding（內(nèi)邊距）。它們分別用于控制元素邊框外部和內(nèi)部的空間大小，包括上下左右四個方向。

img {
margin-top: 10px;
margin-bottom: 10px;
}

以上代碼表示在圖片上方和下方各留出10像素的外邊距。同理，我們可以通過設(shè)置padding屬性控制圖片內(nèi)部上下間距的大小。

img {
padding-top: 10px;
padding-bottom: 10px;
}

此時，圖片內(nèi)部的頂部和底部都會增加10像素的內(nèi)邊距，與周圍文字之間的距離也會變大。

盡管可以通過設(shè)置margin和padding來調(diào)整圖片上下間距，但是過度使用會使頁面顯得過于雜亂。因此，我們需要根據(jù)實際情況合理應(yīng)用這些屬性，以便使網(wǎng)頁布局更加美觀。