父图像比子图像大，没有填充、边框和边距

Question

为什么父图片的高度比孩子的图片大？底部的额外像素是从哪里来的？

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>

​

Answer 1

它来自大多数字体(例如g，j，y)中挂在线条下方的下标文本元素的左侧间隙。要将其删除，请将vertical-align的属性从默认值baseline更改为middle或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>

​

Answer 2

在你的img上添加height: 100%;以使其伸展并占用element的其余空间。底部的灰色边框是element的额外空间，因为它比实际图像更长。如果这解决了你的问题，请运行该代码片段。

​

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

​