Parent is bigger than child image without paddings, borders and margins

Question

Why parent height is bigger than child image? From where the extra pixels at the bottom come?

https://codepen.io/sevgin0954/pen/mdmxZzx

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1rem;
}

.element {
  background-color: gray;
  border: none;
}

img {
  width: 100%;
}

<div class="container">
  <div class="element">
    <img src="https://i.scdn.co/image/ab67706f00000003e62a57481e6aaeb533bea9b3">
  </div>
  <div class="element">
    <img src="https://i.scdn.co/image/ab67706f00000003e62a57481e6aaeb533bea9b3">
  </div>
  <div class="element">
    <img src="https://i.scdn.co/image/ab67706f00000003e62a57481e6aaeb533bea9b3">
  </div>
  <div class="element">
    <img src="https://i.scdn.co/image/ab67706f00000003e62a57481e6aaeb533bea9b3">
  </div>
</div>

score 2 · Answer 1 · answered Sep 14 '21 at 20:50

It comes from the gap left for descender text elements that hang below the line in most fonts (e.g. g, j, y). To remove it, change the vertical-align's property from its default of baseline to middle or top

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1rem;
}

.element {
  background-color: gray;
  border: none;
}

img {
  width: 100%;
  vertical-align: top;
}

<div class="container">
  <div class="element">
    <img src="https://i.scdn.co/image/ab67706f00000003e62a57481e6aaeb533bea9b3">
  </div>
  <div class="element">
    <img src="https://i.scdn.co/image/ab67706f00000003e62a57481e6aaeb533bea9b3">
  </div>
  <div class="element">
    <img src="https://i.scdn.co/image/ab67706f00000003e62a57481e6aaeb533bea9b3">
  </div>
  <div class="element">
    <img src="https://i.scdn.co/image/ab67706f00000003e62a57481e6aaeb533bea9b3">
  </div>
</div>

Yong · Answer 2 · 2021-09-14T21:11:07.247

Add height: 100%; on your img to make it stretch and take the rest of element's space. The gray border at the bottom is the element's extra space as it is longer than your actual image. Run the snippet if this fix your issue.

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1rem;
}

.element {
  background-color: gray;
  border: none;
}

img {
  width: 100%;
  height: 100%;
}

<div class="container">
  <div class="element">
    <img src="https://i.scdn.co/image/ab67706f00000003e62a57481e6aaeb533bea9b3">
  </div>
  <div class="element">
    <img src="https://i.scdn.co/image/ab67706f00000003e62a57481e6aaeb533bea9b3">
  </div>
  <div class="element">
    <img src="https://i.scdn.co/image/ab67706f00000003e62a57481e6aaeb533bea9b3">
  </div>
  <div class="element">
    <img src="https://i.scdn.co/image/ab67706f00000003e62a57481e6aaeb533bea9b3">
  </div>
</div>

Parent is bigger than child image without paddings, borders and margins

2 Answers2