In plain English
Whenever a setting asks for a size — a width, a padding, a font size — it also asks which unit to measure it in. The unit decides what the number is relative to, and that is the whole difference between a layout that adapts and one that breaks.
You will not go far wrong with pixels for small fixed details and percentages for anything that should scale with its surroundings. The other four units are worth knowing when you want text and spacing to stay in proportion as the page grows.
What each option does
| Option | What you will see |
|---|---|
px | Pixels — a fixed, absolute size. 16px is always 16px. Best for small details like a 1px border or an 8px corner radius, where you want an exact result and no surprises. |
% | A percentage of the space the element sits inside. A width of 50% is half of whatever contains it, so it keeps adapting as the screen changes. Best for widths and flexible layouts. |
em | A multiple of the current text size. If the text is 20px, then 1em is 20px and 0.5em is 10px. Best for padding around text, so the spacing grows and shrinks with the words. |
rem | A multiple of the page's base text size (usually 16px, so 1rem is normally 16px). Like em, but it ignores the local text size, which makes it predictable. Best for consistent spacing across a whole page. |
vh | A percentage of the browser window's height. 100vh is exactly one screen tall. Best for full-height hero sections. |
vw | A percentage of the browser window's width. 100vw is exactly one screen wide. Useful for edge-to-edge bands, but be careful: it ignores the space taken by a scrollbar and can cause sideways scrolling. |
How to change it
- In any size setting, use the unit dropdown next to the number field.
- Type the number, then choose the unit. The canvas updates as you go.
- Some settings also offer "auto", which hands the decision back to the browser, and the keywords "inherit" and "unset" for advanced cases.
Watch out for
- A percentage is only meaningful when the surrounding element has a size of its own. A height of 50% inside a container with no set height usually does nothing.
- Mixing many units across one page makes spacing hard to keep consistent. Pick one for spacing (rem is a good default) and stick to it.
- vw includes the scrollbar width on some browsers, so a 100vw element can push the page sideways. Prefer 100% for full-width blocks.
Related settings
For developers
The technical reference for what this setting produces: MDN: CSS values and units. You do not need any of it to use the setting — it is there for whoever is building the components or debugging the published page.
Where to go next
- Back to the full attribute reference
- The Composer — the editing surface these settings live in.
- Publishing — how a change like this reaches your live site.