CSS Grids, margin at the bottom when inserting an image

Question

I'm giving a go at css grids and I'm stuck on a (probably stupid and basic) problem. So I'm trying to basically inserting an image in on of the divs inside the grid and it creates some sort of padding on the bottom.

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

score 6 · Accepted Answer · answered Feb 23 '18 at 17:05

Just set the image to display: block in CSS.

By default images are displayed as inline elements, and therefore have a line-height that allows for descendant characters (like j, p, q).

Setting display: block removes that space at the bottom.

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

score 2 · Answer 2 · answered Feb 23 '18 at 17:07

By default, an image is rendered inline, like a letter. Use vertical-align or display:block property to remove that space

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

CSS Grids, margin at the bottom when inserting an image

2 Answers2