Eliminate the space/gap under images with CSS

The gap under images in HTML often occurs due to default inline or inline-block display properties, which align images along the text baseline, leaving extra space as if accommodating text descenders. To eliminate this gap, you can adjust the image’s CSS properties : display: block; or vertical-align: bottom;

- Powered by CSS attribut : display: block;
- Powered by CSS attribut : vertical-align: bottom;

.blk-1 {
	width: max-content;
	background-color: #f00;
	border: 4px solid rgb(30, 194, 66);
  }
  .blk-1 img {
	display: inline-block;
  }
  
  .blk-2 {
	width: max-content;
	background-color: #f00;
	border: 4px solid rgb(30, 194, 66);
  }
  .blk-2 img {
	display: block;
  }
  
  .blk-3 {
	width: max-content;
	background-color: #f00;
	border: 4px solid rgb(30, 194, 66);
  }
  .blk-3 img {
	vertical-align: bottom;
  }