flex box problem with margin between items

Question

my problem is space between pictures
Hello everyone, I am from Russia and my eng so bad, sorry for this.

I have a problem with margin that u can see on the attachment photo. I already try justify-content and it didnt help to solve my problem.

i don't know from where this margin appeared.
Somebody please help me
thx

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

score -1 · Accepted Answer · answered Jun 05 '20 at 19:45

So this isn't a flexbox specific issue but rather an issue with how the browser renders images.

To fix it simply add

.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

flex box problem with margin between items

1 Answers1