CSS网格，插入图像时底部的边距[重复]

Posted 2023-03-06

【中文标题】CSS网格，插入图像时底部的边距[重复]

【英文标题】：CSS Grids, margin at the bottom when inserting an image [duplicate]

【发布时间】：2018-08-03 19:12:35

【问题描述】：

我正在尝试使用 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>

【参考方案1】：

默认情况下，图像是内联渲染的，就像一个字母。使用 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>

【参考方案2】：

只需在 CSS 中将图像设置为 display: block。

默认情况下，图像显示为内联元素，因此具有允许后代字符（如 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>