在网页开发过程中，我们经常会使用CSS来设置图片的样式和布局。其中一个常见的问题就是如何设置图片和周围元素之间的上下距离。

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

在上述代码中，我们使用了margin-top和margin-bottom属性来设置图片的上下边距。这两个属性分别表示元素上方和下方的外边距，可以为正数、负数或零。

举个例子，如果我们想要在一段文字中间插入一张图片，并且让图片和文字之间保持一定的距离，可以这样设置：

这是一段文字。在这里插入图片：
继续下面的文字。
img {
display: block;
margin: 20px auto;
}

上面的代码中，我们将图片设置为块级元素，这样可以使图片显示在一行，并且可以设置宽度和高度。然后，我们使用margin属性将图片设置为居中，并且与文字之间保持20px的距离。

需要注意的是，在某些情况下，可能会出现图片底部与行间距重叠的问题。此时，可以使用vertical-align属性来解决：

img {
vertical-align: bottom;
}

使用上述代码可以将图片底部对齐到行底部，并且避免底部重叠的情况发生。

总的来说，设置图片和周围元素之间的上下距离需要根据具体情况进行调整。掌握好margin、display和vertical-align等CSS属性的用法，可以有效解决图片布局问题。