[分享]css3怎么设置图片距离

在网页设计中，图片是增强网页美观度的重要元素之一。如果图片的位置和距离设置得合理，可以让网页更加美观舒适。下面就以CSS3为例，介绍如何设置图片的距离。 首先，我们需要在HTML中加入一个图片，代码如...

在网页设计中，图片是增强网页美观度的重要元素之一。如果图片的位置和距离设置得合理，可以让网页更加美观舒适。下面就以CSS3为例，介绍如何设置图片的距离。
首先，我们需要在HTML中加入一个图片，代码如下：

 <img src="picture.png" alt="图片"> 

接下来的样式可以直接写在head标签中或者单独放在CSS文件中。那么，如何使用CSS3设置图片的距离呢？
## 设置图片和文字之间的间距
有时候，我们希望在网页中把图片和文字分开，避免它们挤在一起显得拥挤。下面的代码可以使图片和文字之间间距10像素：

 img {
    margin-right: 10px;
  } 

这样，图片和文字之间就有了10像素的空隙。
## 设置图片和容器之间的间距
如果图片在一个容器里，我们可能希望为容器设置内边距，以让图片与容器的边缘保持一定的距离。下面的代码可以设置容器与图片之间的距离为20像素：

 .container {
    padding: 20px;
  } 

这样，容器四周就会出现20像素的留白，图片就与容器保持了一定的距离。
## 设置图片和浏览器边缘的距离
有时候，我们希望让网页更美观，把图片与浏览器边缘分开。下面的代码可以设置图片与浏览器上下左右边缘的距离都为30像素：

 img {
    margin: 30px;
  } 

这样，图片与浏览器的上下左右边缘都会出现30像素的空隙。
总结一下，使用CSS3设置图片距离可以让网页更加美观舒适。以上就是设置图片距离的几种方式。大家可以根据自己的需要来选择使用哪种方式。