JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

From left to right:
<ul>
  <li>DIV with IMG</li>
  <li>DIV with A containing IMG</li>
  <li>DIV with A containing a display:block IMG</li>
  <li>DIV with display:block A containing a display:block IMG</li>
</ul>
<div id="demo-content">
  <div><img src="https://thumbs.dreamstime.com/t/stamp-text-demo-images-64762629.jpg" /></div>
  <div><a href="#"><img src="https://thumbs.dreamstime.com/t/stamp-text-demo-images-64762629.jpg"/></a></div>
  <div class="block-image"><a href="#"><img src="https://thumbs.dreamstime.com/t/stamp-text-demo-images-64762629.jpg"/></a></div>
  <div class="block-link"><a href="#"><img src="https://thumbs.dreamstime.com/t/stamp-text-demo-images-64762629.jpg"/></a></div>
</div>

CSS

div {
  background-color: orange;
  display: inline-block;
  border: 1px solid black;
}

#demo-content {
  background: green;
}

a {
  background-color: blue;
}

.block-image img {
  display: block;
  margin: 0;
  padding: 0;
}

.block-link img,
.block-link a {
  display: block;
  margin: 0;
  padding: 0;
}