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

Question

我在css网格上走了一段时间，而且我遇到了（可能是愚蠢和基本的）问题。 所以我试图基本上在网格内的div上插入一个图像，并在底部创建某种填充。

＆＃13;

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需将图片设置为CSS中的display: block。

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

设置display: block会删除底部的空格。

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

默认情况下，图像以内嵌方式呈现，就像字母一样。使用vertical-align或display:block属性删除该空格

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

#square1 {
	background-color: red;
}

#square2 {
	background-color: blue;
}
#square3 {
	background-color: yellow;
}

img{
vertical-align:middle
}

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