Plain HTML and CSS displayed height does not match css

Question

I feel like I shouldn't have to ask this question, but it has me perplexed. Previously I've never really been bothered about exact pixel sizes of rendered HTML items, but I am working with a designer who is comparing the browsers output (Chrome) with the design in Figma.

The case that has me perplexed is buttons, why when I add a button to my html page and give it a specific pixel height does it not render to this height when measured with the Powertoys ruler?

For example a blank jsfiddle with

<div>
<button style="height: 48px;">
Do something magic
</button>
</div>

will render:

now I appreciate default borders, paddings, etc. However:

42+2+1+1+2=48 so how come the measurement is 70px ?

In case it matters

136.0.7103.93 (Official Build) (64-bit) (cohort: Stable)

Windows 11 Version 24H2 (Build 26100.3775)

Do you mean "Why powertoys ruler ddn't give the right height ?" — AlainPre
– AlainPre, Commented May 15 at 15:26
You are measuring screen pixels. What device are you on? It'll depend on its spec as to what Powertoys ruler sees. — A Haworth
– A Haworth, Commented May 19 at 5:55

Frox · Accepted Answer · 2025-05-15 16:51:56Z

1

This is a simple case of "it's not doing what you think its doing". Powertoys ruler measures how many pixels it physically takes on your screen; AFTER scaling. Scaling settings can be found under the System > Display > Scale & Layout.

You are probably on 150% scaling, hence you should get 48 x 150 / 100 = 72px. On Chrome the ruler will measure 2px less as it does not include the border but on Firefox the border is included.

On 100% scaling you will get the exact size of 48, at least on Firefox.

Chrome 150% Scaling

Firefox 150% Scaling

Chrome 100% Scaling

Firefox 100% Scaling

answered May 15 at 16:51

Frox

6791 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Youness zagouri · Accepted Answer · 2025-05-15 10:05:00Z

-5

Button doesn't have height, try add padding !

answered May 15 at 10:05

Youness zagouri

274 bronze badges

Collectives™ on Stack Overflow

Plain HTML and CSS displayed height does not match css

2 Answers 2

Chrome 150% Scaling

Firefox 150% Scaling

Chrome 100% Scaling

Firefox 100% Scaling

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Chrome 150% Scaling

Firefox 150% Scaling

Chrome 100% Scaling

Firefox 100% Scaling

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related