Question 1

Why is 1 inch not always 1 inch on my screen?

Accepted Answer

In CSS, the inch unit (in) is an absolute unit defined mathematically as exactly 96 CSS Reference Pixels, not as a physical measurement of hardware. Because different monitors have vastly different pixel densities (a high-resolution Retina display packs hundreds of pixels into a physical inch, while an old CRT monitor packs very few), the physical size of those 96 pixels will stretch or compress depending on the hardware. CSS inches are only physically accurate when a document is sent to a printer, where the rendering engine can map the 96 pixels directly to the physical capabilities of the printer's ink nozzles.

Question 2

Should I use rem or em for padding and margins?

Accepted Answer

The industry consensus is to use rem for global layout spacing (such as the space between major page sections or the main grid gaps) and to use em for component-level spacing (such as the padding inside a button or a customized alert box). Using em for a button's padding ensures that if you change the button's font size, the padding scales proportionally, maintaining the button's exact visual ratio. Using rem for global margins ensures that the spacing between sections remains mathematically consistent across the entire page, unaffected by the varying font sizes of the elements contained within those sections.

Question 3

How do I convert pixels to rems if the user changes their default font size?

Accepted Answer

You do not need to manually calculate anything when a user changes their default font size; the browser's rendering engine handles the conversion automatically. When you write 2rem in your CSS, you are telling the browser to multiply the root font size by 2. If the user's default is 16px, the browser calculates 32px. If the user changes their default to 24px in their browser settings, the browser automatically recalculates 2 * 24 and renders the element at 48px. This automatic, dynamic recalculation is the primary advantage of using relative units over hardcoded pixels.

Question 4

What is the difference between vh and svh/lvh/dvh?

Accepted Answer

The traditional vh (viewport height) unit calculates percentages based on the maximum possible height of the browser, ignoring mobile UI elements like expanding address bars. This often causes content to be hidden behind the UI. To fix this, CSS introduced three new units: svh (Small Viewport Height) represents the height when the mobile UI is fully expanded (minimum visible space). lvh (Large Viewport Height) represents the height when the mobile UI is hidden (maximum visible space). dvh (Dynamic Viewport Height) recalculates its value in real-time, smoothly transitioning between the small and large values as the user scrolls and the address bar moves.

Question 5

Is it ever acceptable to use pixels in modern web design?

Accepted Answer

Yes, pixels remain highly relevant for specific use cases where strict, immutable sizing is required. Pixels are ideal for defining thin borders (e.g., border: 1px solid black;), as you rarely want a border to scale up to 3 or 4 pixels thick just because the user increased their font size. Pixels are also necessary when sizing raster images or defining specific hardware constraints, such as setting a max-width: 1200px on a main content container to prevent lines of text from becoming uncomfortably long on ultra-wide desktop monitors.

Question 6

How do CSS units affect search engine optimization (SEO)?

Accepted Answer

While Google's search algorithms do not strictly read whether you used px or rem, CSS units heavily impact SEO through the lens of user experience metrics and mobile-friendliness. Google indexes websites using a mobile-first approach. If you use fixed absolute units (px) that cause your layout to overflow on a mobile screen, Google's bots will detect the horizontal scrolling and flag the site as "not mobile-friendly," which results in a severe ranking penalty. Furthermore, using viewport units and fluid typography prevents layout shifts and ensures text is legible without zooming, both of which are core components of Google's Core Web Vitals ranking factors.

CSS Units Converter

Command Palette