3

I've been noticing that, at least in Firefox (haven't tested extensively in other browsers yet), the offsetHeight and offsetWidth properties on a <div> might be off by one pixel. (And yes, I'm already accounting for borders, padding, and margin.) Take a look at this screenshot to see what I mean:

Here the total height with borders is 46px, but as Firebug shows the offsetHeight is only 45px

So here the total ACTUAL height with borders is 46px, but as Firebug shows the offsetHeight is 47px (and without borders as 45px). Why the discrepancy? Is that a browser glitch? I should mention that the <div> in question has float: left set on it, and it also has some content inside of it that is similarly floated: left.

naivists
  • 32,681
  • 5
  • 61
  • 85
soapergem
  • 9,263
  • 18
  • 96
  • 152
  • Can you show the source markup and CSS? – Marcel Korpel Feb 25 '11 at 14:47
  • I have observed something similar, and it happens only in Firefox, but never in Chrome or Edge. I see it in Firefox 88.0 for example. I am not using float, just a simple flexbox. Items in the flexbox sometimes report an offsetWidth that is 1 pixel less than the actual width. – personal_cloud Dec 17 '22 at 04:17

1 Answers1

2

Look at your borders (and your math) again. You have a 1-pixel border on all sides of the div, which means a pixel on both the top and the bottom of the div.

1+1=2
45+2=47

Shauna
  • 9,495
  • 2
  • 37
  • 54