CSS 圖片四個(gè)方向的間距可以通過以下屬性進(jìn)行設(shè)置：

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

其中，margin-top 表示圖片與上方元素之間的距離；margin-bottom 表示圖片與下方元素之間的距離；margin-left 表示圖片與左側(cè)元素之間的距離；margin-right 表示圖片與右側(cè)元素之間的距離。

可以通過改變這四個(gè)屬性的值來實(shí)現(xiàn)不同圖片在頁(yè)面中的位置和大小效果。例如，如果要讓圖片離邊界更近一些，可以將 margin-top 和 margin-left 設(shè)置為較小的值。

img.playbutton {
margin-top: 5px;   /* 上邊距 */
margin-left: 10px; /* 左邊距 */
}

上述代碼表示給 class 為 playbutton 的圖片設(shè)置上邊距為 5px，左邊距為 10px。

當(dāng)然，你也可以使用一個(gè)屬性來同時(shí)設(shè)置這四個(gè)方向的間距：

img {
margin: 10px 20px;  /* 上下邊距為 10px，左右邊距為 20px */
}

上述代碼表示給所有圖片設(shè)置上下邊距為 10px，左右邊距為 20px。

最后，需要注意的是，盡量避免使用負(fù)值的 margin，因?yàn)檫@樣可能會(huì)造成元素重疊或其他不良影響。