Element has 1px padding according to DevTools inspector, but on screen is not actually 1px

Question

I have a 46px element, with 1px padding, and an element inside it occupying all the space.

.cool-border {
  width: 256px;
  height: 46px;
  padding: 1px;
  background: linear-gradient( 90deg, #419cfd, #00a9fe, #00b4f7, #00bde9, #00c5d6, #00cac1, #38ceac, #6ed199);
   box-sizing: border-box;
  
}

.big-white-area {
  height: 100%;
  width: 100%;
  background-color: white;
  box-sizing: border-box;
}

<div class="cool-border">
  <div class="big-white-area">
    
  </div>
</div>

See this JSfiddle for a replicable example

With my browser (Chrome) at 100% zoom, the element looks like this:

As you can see, the bottom padding seems to be slightly thinner.

However DevTools says .cool-border (the outer div) is exactly 46px.

DevTools says .cool-border (the outer div) is exactly 44px.

How can I make the padding consistent?

not related to your issue but you can use border-image and reduce your code: https://jsfiddle.net/en3vxh4a/ — Temani Afif, Jan 20 '23 at 14:05
as you like but I doubt you will get clear answers because you are facing a sub pixel rendering issue that you cannot really control — Temani Afif, Jan 20 '23 at 14:11
I would say, keep it. Maybe somebody can elaborate and we can learn about chrome's layout engine. Although I guess it's rather technical. It might be about your device pixel ratio. What does the console (ctrl-shift-i) say if you enter `window.devicePixelRatio`? — metatron, Jan 20 '23 at 14:12
@TemaniAfif Sadly it turns out I can't use border-image as my real code has round borders. https://stackoverflow.com/questions/62052199/border-radius-with-border-image — mikemaccana, Jan 20 '23 at 14:22
4K monitor and native display with Firefox and Chrome on my Mac equal paddings. `window.devicePixelRatio` is `2` — Justinas, Jan 20 '23 at 14:28
Thanks @justinas. Same here, it's equal paddings with Scale set to 1 or 2 in Windows. — mikemaccana, Jan 20 '23 at 16:09

score 2 · Accepted Answer · edited Jan 22 '23 at 12:09

It's apparently due to rounding issues from having a devicePixelRatio that isn't an even number.

The device pixel ratios converts 'CSS pixels' (pixels authored in your CSS) to 'device pixels' (real pixels on your device).

In the DevTools console, run:

window.devicePixelRatio
1.5

4K monitor, set to Windows recommended 150% scaling: window.devicePixelRatio is 1.5 (shows inconsistent padding, looks bad)
iPhone 13, which has window.devicePixelRatio of 3 (shows consistent padding, looks good)

Since device pixel ratios can be in fractions browsers have to deal with "half" pixels and round them. Your device pixel ratio is 1.5 so the 2 pixels of your border are multiplied to 3 pixels and spread out over your border. That also explains why a device pixel ratio of 2 or 3 does not have this issue.

I'm not an expert in this but it seems the algorithm for border-image is calculated in a different way as the rounding "issue" does not occur here.

The issue will go away if the 'Scale' (DPR) can be changed to 100%, but obviously changing DPR is not always possible:

Element has 1px padding according to DevTools inspector, but on screen is not actually 1px

1 Answers1