[分享]css两个图片在一行怎么有间隔

在网页设计中，经常需要在一行中显示两个图片，并且希望这两个图片之间有一定的间隔。下面将介绍几种方法来实现这个效果。方法一： 直接在 HTML 代码中间加入空格或其他符号 这种方法最为简单直接，但是...

在网页设计中，经常需要在一行中显示两个图片，并且希望这两个图片之间有一定的间隔。下面将介绍几种方法来实现这个效果。

方法一：
直接在 HTML 代码中间加入空格或其他符号

<img src="图片1路径"> <img src="图片2路径">

这种方法最为简单直接，但是间隔的大小难以精确控制。

方法二：
使用 margin 属性控制间隔

需要给第一张图片定义 margin-right，给第二张图片定义 margin-left。代码如下：

<style>
img {
   margin-right: 10px;
}
img:last-of-type {
    margin-right: 0;
    margin-left: 10px;
}
</style>

这种方法可以精确控制间隔的大小，但是需要注意一点，要给最后一个图片的 margin-right 定义为0，不然间隔会比预想的大。

方法三：
使用 display:flex 来控制布局

使用 display:flex 可以将两个图片放在同一个容器下，然后使用 justify-content 属性控制水平方向上的布局。代码如下：

<style>
.container {
    display: flex;
    justify-content: space-between;
}
</style>

<div class="container">
    <img src="图片1路径">
    <img src="图片2路径">
</div>

这种方法同样可以精确控制间隔的大小，并且可以用于多张图片的布局。

以上几种方法都可以实现在一行中显示两个图片，并且拥有一定的间隔。具体选择哪一种方法取决于具体需求和使用习惯。