项目之间边距的弹性框问题

Question

我的问题是图片之间的空间
大家好， 我来自俄罗斯，我的英语太糟糕了，对此感到抱歉。

我有一个边距问题，您可以在附件照片上看到。 我已经尝试了证明内容，但它无助于解决我的问题。

我不知道这个边距是从哪里出现的。
有人请帮帮我
谢谢

<style>
.services1 {
display: flex;
width: 80vw;
align-items: center;
margin-left: 10vw;
background-color: white;
text-align: center;
}
.photo {
width: 40vw;
}
.photo div {
margin: 0;
}
.services_text_photo1 {
width: 40vw;
color: black;
font-weight: 100;
font-size: 16px;
}
h5 {
font-size: 32px;
font-weight: 600;
margin: 0;
}
.services_text_width {
width: 35vw;
margin:0 2.5vw;
}
</style>
<div class="services1">
<div class="services_text_photo1 services_text_width">
<h5>text</h5>
<p>text</p>
</div>
<div class="photo">
<img src="img/photo.jpg" alt="" width="100%">
</div>
</div>
<div class="services1">
<div class="photo">
<img src="img/photo-3.jpg" alt="" width="100%">
</div>
<div class="services_text_photo1 services_text_width">
<h5>text</h5>
<p>text</p>
</div>
</div>

Answer 1

因此，这不是弹性框的特定问题，而是浏览器如何呈现图像的问题。

要修复它，只需添加

.photo img {
vertical-align: bottom;
}
```html
This post has some good info in explaining it I think
https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image/5804278