align different image ridimension and delete margin

Issue

I should like know how I can fix different image alignment and remove margin. I want to align items in the center but there is a part of iamge that I think is margin that I can't remove. The part I want remove is the orange zone

.content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px;
  width: 100%;
}

.content__row {
  display: flex;
  width: 100%;
  margin: 5px 0;
}

.content__img {
  display: flex;
  width: 80%;
  height: 90%;
  padding: 0%;
}

.content__a {
  text-decoration: none;
  align-items: center;
}

.content__p {
  align-items: center;
  text-align: center;
  width: 80%;
  font-size: 35px;
  font-weight: 900;
  font-family: 'Ubuntu', sans-serif;
  color: rgb(39, 39, 255);
}

<div class="content">
  <div class="content__row">
    <a class="content__a" href="#">
      <img class="content__img" src="https://via.placeholder.com/300x600" alt="">
      <p class="content__p">COMPILARE
        <br>
        <span class="content__span">730?</span>
      </p>
    </a>
    <a class="content__a" href="#">
      <img class="content__img" src="https://via.placeholder.com/300x600" alt="">
      <p class="content__p">CALCOLARE
        <br>
        <span class="content__span">L'ISEE?</span>
      </p>
    </a>
    <a class="content__a" href="#">
      <img class="content__img" src="https://via.placeholder.com/300x600" alt="">
      <p class="content__p">CALCOLARE
        <br>
        <span class="content__span">L'ISEE?</span>
      </p>
    </a>
  </div>
</div>

Solution

Well, basically you've given your <a>'s a width of 30%, and there's no justify-content property on that flexbox (.content__row), so there's 10% left over on the right. Add justify-content: space-between; (or around) into your .column__row class.

Some comments:

I'm not sure why you're adding flex onto your images. If you turn your <a>'s into column flexboxes then you'll get rid of the 'space' character between your image and <p> tags (a common problem).

Look into adding the object-fit: cover; property onto your images, then you can resize them without worrying about the images distorting.

Answered By - Nicolas Goosen