CSS 圖片留白樣式是一種很有用的技巧，可以讓我們輕松控制圖片和文字相互之間的間距，從而讓頁面更加美觀和易讀。下面我們來看一下如何使用 CSS 實現圖片留白效果。

img { 
display: block; 
margin: auto;
padding: 20px;
border: 1px solid #ccc; 
}

代碼中，我們使用了 img 標簽選擇器，然后定義了圖片的樣式，包括 display 屬性、margin 屬性、padding 屬性和 border 屬性。

首先，我們使用 display: block; 將圖片轉化為塊級元素，這樣可以讓圖片在文本中占據一個整行。接著，我們使用 margin: auto; 將圖片居中，使其與文本對齊。然后，我們使用 padding: 20px; 為圖片周圍添加留白。最后，我們使用 border: 1px solid #ccc; 為圖片添加一個 1 像素的邊框，使其與頁面其他元素保持一致的樣式。

如果你想跟隨文字進行對齊，而不是居中，則可以選擇在圖片的左側或右側添加留白，而在另一側刪除留白。例如：

img { 
display: inline-block; 
margin-right: 20px;
padding-left: 20px;
border: 1px solid #ccc; 
}

這里，我們將 display 屬性設置為 inline-block，使圖片與文本在一行內顯示，并使用 margin-right: 20px; 將圖片向右對齊。接著，我們使用 padding-left: 20px; 為圖片左側添加留白，同時將右側的留白刪除。最后，我們添加了一個 1 像素的邊框，使圖片更加美觀。

總之，通過使用 CSS 圖片留白樣式，我們可以輕松控制頁面中文字和圖片之間的間距，從而提高頁面的可讀性和美觀性。你可以根據不同的需要，靈活運用這些技巧，在網頁設計中展現出你自己的風格。