项目之间边距的弹性框问题[重复]答案

【问题标题】：flex box problem with margin between items [duplicate]项目之间边距的弹性框问题[重复]
【发布时间】：2020-06-06 03:45:06
【问题描述】：

my problem is space between pictures
大家好，我来自俄罗斯，我的英语很糟糕，对此感到抱歉。

我在附件照片上看到的边距有问题。我已经尝试过 justify-content 并没有帮助解决我的问题。

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

<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>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

所以这不是特定于 flexbox 的问题，而是浏览器如何呈现图像的问题。

要修复它，只需添加

.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

【讨论】：