Start with what the size should depend on
A CSS unit is more than a way to write a number. It determines what that number is measured against. Before choosing one, ask: Should this size stay fixed in CSS pixels, follow the document’s text size, follow its parent, or change with the available space?
To try the examples, you need a text editor and a browser that supports standard CSS. No framework or particular browser version is required for the units covered here. Add the declarations to a stylesheet, then resize the browser window or change the text settings to see what responds.
Use px for details that need a steady size
The px unit represents a CSS pixel, not necessarily one physical pixel on a screen. It is useful when a dimension should not scale with its parent’s font size. A border of 1px, for example, is a straightforward choice for a thin divider. A small icon or a precisely sized visual detail may also be easier to manage in px.
Avoid assuming that px makes a layout permanently rigid. Browsers can zoom CSS pixels, and available space still changes between screens. The bigger concern is using fixed widths where content needs room to adapt. A card with width: 400px may overflow a narrow container; width: 100% together with max-width: 400px lets it shrink when necessary.
Use rem for page-wide text and spacing
The rem unit is based on the root element’s font size. If the root font size is 16px, then 1rem equals 16px and 2rem equals 32px. Because rem values share that reference, they are handy for consistent font sizes, gaps, and padding across a page. For example, a heading might use font-size: 2rem while a section uses padding: 1.5rem.
You do not need to set a root font size just to use rem. Leaving the browser’s default in place allows the page to respond more naturally to a visitor’s preferred text size. When comparing rem with px, think of rem as a shared sizing scale rather than a guarantee that every element will have the same physical dimensions.
Use em when a component should scale with its text
The em unit is tied to font size, but its reference depends on where it is used. For font-size, an em value is relative to the parent’s font size. For many other properties, including padding, it is relative to the element’s own computed font size. A button with font-size: 1.25rem and padding: 0.5em 1em therefore gets padding that grows with the button text.
This makes em useful for self-contained components. It also creates a common surprise: nested font-size values in em can compound. If each nested element sets font-size: 1.2em, the text grows at every level. Use rem when you want a predictable page-wide reference; use em when scaling with nearby text is the point.
Use percentages for space provided by a container
Percentages express a size relative to another size, often that of a containing block. A child with width: 50% usually takes half of its container’s available width, not half of the browser window. That makes percentages useful for flexible widths, images, and layouts that should respond to their surroundings.
The reference is not identical for every CSS property. In particular, height: 100% may not behave as expected unless the containing block has a height the browser can resolve. If a section merely needs to fill available layout space, a flex or grid layout may be clearer than a chain of percentage heights. Test percentage-based sizes in the actual container where they will be used.
Use viewport units for screen-related dimensions, then combine units
The viewport units vw and vh represent percentages of the viewport’s width and height: 50vw is half its width, while 100vh relates to its height. They can help size a broad visual area or create a panel that follows the browser window. Be cautious with long text and controls, though. A font size set only in vw may become too small on a narrow screen or too large on a wide one.
Viewport height can also be tricky on mobile browsers, where browser controls affect the visible area. Check the result on a narrow screen, especially if a section must show all its content without clipping. For everyday layouts, mixing units is often the simplest answer: use rem for text and general spacing, em for button padding, percentages for flexible widths, and px for thin borders. Choose each unit according to what that particular dimension needs to follow.
