css如何控制图片行距

在网页设计中，图片是经常使用的元素之一。当多张图片连在一起显示时，难免会出现图片之间行距不一致的情况，影响页面的美观度。那么，如何通过 CSS 控制图片行距呢？

img {
    vertical-align: middle;
    margin-bottom: 10px;
}

可以看出，我们需要使用 vertical-align 和 margin-bottom 属性来控制图片间的行距。

vertical-align: middle;

vertical-align 属性用于定义行内元素的垂直对齐方式，通过设置该属性为 middle 可以让图片在行高内垂直居中，从而使得行高相等。

margin-bottom: 10px;

margin-bottom 属性用于控制元素下方的外边距，通过设置该属性为一个固定值可以使得图片之间的行距保持一致。

在实际应用中，我们可以根据自己的需求进行调整 margin-bottom 的值来获得最佳的效果。

综上所述，通过设置 vertical-align: middle; 和 margin-bottom: 10px;，我们可以有效地控制行内图片的行距，从而使得页面的美观度得到提升。