img tags seem to have unusual margins in Chrome, Edge, and Opera browsers, while Firefox displays them correctly.
Queries
- What is causing these margins specifically in Chrome? The Devtool does not detect any margin properties.
- Is there a straightforward solution to fix this issue?
Code Illustration
Access the Code Pen Link for further details: https://codepen.io/silwalanish/pen/vYjYVbL
.container {
gap: 20px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.card {
border: 2px solid;
}
.thumbnail {
width: 100%;
height: 400px;
}
img {
width: 100%;
height: 100%;
}<div class="container">
<div class="card">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1655427565427-34ea63c7ede6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2MjE4OTQ4Ng&ixlib=rb-1.2.1&q=80&w=1080" alt="Test Image">
</div>
<p>Asdasdasd</p>
</div>
<div class="card">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1655427565427-34ea63c7ede6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2MjE4OTQ4Ng&ixlib=rb-1.2.1&q=80&w=1080" alt="Test Image">
</div>
</div>
<div class="card">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1655427565427-34ea63c7ede6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfD ...
Snapshot
Chrome
https://i.stack.imgur.com/E4Ew4.png
The left and top margins around the images are noticeable in Chrome.
https://i.stack.imgur.com/9I2mV.png
If you resize the page, you will see odd margins appearing on the right (middle image).
Firefox
https://i.stack.imgur.com/qIhoi.jpg
Edit
This issue seems to be particular to Windows operating systems. It functions correctly on Linux and reportedly works well on Mac according to one of the comments.
No unexpected margins are observed in Firefox on any platform.