CSS网格，插入图像时底部的边距

Question

我正在尝试使用CSS网格，但遇到了一个（可能是愚蠢和基本的）问题。因此，我试图基本上在网格内的div中插入一个图像，并在底部创建某种填充。

#test {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

#square1 {
  background-color: red;
}

#square2 {
  background-color: blue;
}

#square3 {
  background-color: yellow;
}

<div>

  <div id="test">
    <div id="square1"><img src="https://wepushbuttons.com.au/wp-content/uploads/2012/03/twitter-logo-small.jpg"></div>

    <div id="square2"></div>

    <div id="square3"></div>

  </div>

Answer 1

只需将图像设置为display: blockCSS。

默认情况下，图像显示为行内元素，因此具有允许后代字符（如j，p，q）的行高。

设置display: block将删除底部的空间。

#test {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

#square1 {
  background-color: red;
}

#square2 {
  background-color: blue;
}

#square3 {
  background-color: yellow;
}

#square1 img {
  display: block;
}

<div>
  <div id="test">
    <div id="square1"><img src="https://wepushbuttons.com.au/wp-content/uploads/2012/03/twitter-logo-small.jpg"></div>
    <div id="square2"></div>
    <div id="square3"></div>
  </div>
</div>