CODEWITHSUNDEEP
htmlcssresolution
Diego Ponciano
Diego Ponciano

Reputation: 450

1px border on image leaves weird white gap on top and right of image

As you can see on the screenshot (and maybe you will be able to reproduce from the code snippet depending on your computer), there is a very annoying white gap that I don't know where is coming from. This is not the issue about the gap at the bottom due to display inline property.

This gap does not show at all on my Mac but does show on my Lenovo and Asus laptops. Also shows up on Edge and Firefox.

enter image description here

img{
  border: 1px solid;
  display: block;
  box-sizing: border-box;
}
<img src="https://via.placeholder.com/200x200">

Upvotes: 0

Views: 1401

Answers (1)

Pachacroute
Pachacroute

Reputation: 11

This problem occurs when height is not fixed like in

max-width: 100%;
height: auto;

Resolved this by replacing border: 1px solid by outline: 1px solid with box-sizing: border-box.

Upvotes: 1

Related Questions