在前端開發中，我們經常會遇到需要在網頁上添加圖片的情況。而有些時候，為了美觀或者布局需要，我們需要在圖片周圍留一些空白，讓圖片和其他元素更好地融合在一起。下面就來介紹一下使用CSS來實現圖片留白的方法。 首先，我們需要在HTML中添加圖片標簽（img），并設置好圖片的路徑和一些屬性。比如，我們有一張寬度為400px，高度為300px的圖片，HTML代碼如下：

<img src="圖片路徑" width="400" height="300" />

接下來，我們可以使用CSS來對圖片進行樣式的設置。其中，有兩個屬性非常關鍵，即margin和padding。 margin指的是元素的外邊距，可以讓元素與其他元素之間保持一定的距離。而padding則是元素的內邊距，可以使元素的內容與邊框之間保持一定的距離。 要想讓圖片周圍留白，可以通過設置margin來實現。比如，我們想讓圖片周圍留出10px的空白，可以使用如下CSS代碼：

p img {
margin: 10px;
}

其中，p img表示選中所有在p標簽內部的img元素，然后給它們設置10px的外邊距。 如果我們只想讓圖片在左右留出空白，而上下沒有空白，可以將margin屬性的值設置為"10px 0"，即表示上下留白為0。

p img {
margin: 0 10px;
}

另外，如果我們想要在圖片周圍添加一定的邊框，可以使用padding屬性來實現。比如，我們想要在圖片周圍添加一條1px的黑色邊框，并讓邊框與圖片之間留出5px的空白，可以使用如下CSS代碼：

p img {
padding: 5px;
border: 1px solid black;
}

其中，padding設置了圖片的內邊距為5px，而border則設置了圖片的邊框為1px實線黑色。這樣就可以讓圖片周圍留出一定的空白和邊框了。 綜上所述，通過設置margin和padding屬性，我們可以很方便地實現圖片周圍的留白和邊框效果。這些樣式設置不僅可以美化網頁，還可以幫助我們更好地布局頁面。