0

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">
Diego Ponciano
  • 453
  • 5
  • 12
  • 1
    Try going into dev tools, add `transform: translate(1px, 0)` to your element, and then remove the `transform` property. If this makes the gap disappear, you are unfortunately dealing with a rendering bug. – Gershom Maes Nov 29 '20 at 18:22
  • That exact line does not fix it, however I understand the idea and I do believe is a bug, it is also showing on my other 2 computers except on my macbook. – Diego Ponciano Nov 29 '20 at 18:27
  • No repro on Firefox Nightly 85.0a1 or Chrome 87.0.4280.66, Linux or Android. Do you have a high DPI screen? – Sebastian Simon Nov 29 '20 at 18:51
  • This is what it looks like [on Firefox Nightly 91.0a1](//i.stack.imgur.com/LfRJT.png) ([scaled up](//i.stack.imgur.com/daptR.png)) using the same 400 % zoom. Still no repro. Does this still occur? (Again) Do you have a high DPI screen? – Sebastian Simon Jun 12 '21 at 07:39
  • Yes this still occurs, it's 3 different screens, one high DPI which would be the MAC the other two low-medium. – Diego Ponciano Jun 15 '21 at 21:56

1 Answers1

1

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.

Pachacroute
  • 11
  • 1