在前端开发中，我们经常会遇到需要在网页上添加图片的情况。而有些时候，为了美观或者布局需要，我们需要在图片周围留一些空白，让图片和其他元素更好地融合在一起。下面就来介绍一下使用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属性，我们可以很方便地实现图片周围的留白和边框效果。这些样式设置不仅可以美化网页，还可以帮助我们更好地布局页面。