The box model : height and width on browsers

Okay so when the width and height of an element are set in pixels, it will be the same size on all devices. But what if the browser’s display was set to zoom in at 125%, will the element’s dimensions be affected?

It may vary between browsers, but I don’t believe it does.

Changing the zoom will change the size of the items on the page. When you are writing the HTML you are writing it as 100%

You can test this with something like this:

<html>
    <head>
        <style>
            p {
                background-color: red;
                width: 50px;
                height: 50px;
            }
         </style>
    </head>

    <body>
        <p> Testing </p>
    </body>
    
</html>

You can then change your browser zoom level and watch the red square change.
You can use any element as your testing item, I just picked a <p> element.

Yes you were right.
Changing the browser didn’t affect the dimensions but changing the zoom did.
Thank you.

1 Like