[分享]css两个图片的距离怎么设置

在CSS中，通过margin属性可以设置两个图片间的距离。 margin属性是用来设置元素的外边距，包括上、下、左、右四个方向，每个方向的值可以单独设置。img { margin: 10px; / 设...

在CSS中，通过margin属性可以设置两个图片间的距离。 margin属性是用来设置元素的外边距，包括上、下、左、右四个方向，每个方向的值可以单独设置。

img {
    margin: 10px; /* 设置所有方向的外边距均为10px */
    margin-top: 20px; /* 设置上方外边距为20px */
    margin-right: 30px; /* 设置右侧外边距为30px */
    margin-bottom: 40px; /* 设置下方外边距为40px */
    margin-left: 50px; /* 设置左侧外边距为50px */
} 

以上为margin属性的基本使用方法。例如，如果想要两个图片之间的距离为20px，则可以给其中一个图片添加margin-bottom: 20px属性，给另一个图片添加margin-top: 20px属性。

img {
    margin-bottom: 20px; /* 第一个图片的下方外边距为20px */
}
img + img {
    margin-top: 20px; /* 第二个图片的上方外边距为20px */
} 

以上代码中，"+"符号是CSS中的兄弟选择器，它可以选择前面相邻的兄弟元素。因此，"img + img"选择器选择的是紧跟在前面的img元素。

需要注意的是，当两个图片的外边距重叠时，它们之间的距离会取两个外边距中的较大值。因此，在设置图片之间的距离时，需要注意它们的margin值是否会重叠。