Padding

The cushioning inside the column, between its edges and the content sitting in it.

Where to find it
Labelled Padding in the "Selected Column" section of the Modify drawer.
Per device
Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.
Underlying CSS
padding

In plain English

Padding is the mat inside a picture frame. The frame is the column's border, the photograph is your content, and padding is the white space between them that stops the image from touching the edge.

Because padding is inside the column, a background colour fills it. This is what makes padding the setting you want for coloured cards, buttons, and callout boxes: it gives the text room to breathe while the colour extends all the way to the edge.

You can set one value for all four sides or control the top, right, bottom, and left separately. Unlike margin, padding cannot be negative and does not accept "auto" — space inside a box either exists or it does not.

When you would use it

  • Text is pressed right up against the edge of a coloured or bordered card.
  • You are building a button or badge and want the label to sit comfortably inside it.
  • A section needs internal breathing room without moving away from the blocks around it.

How to change it

  1. Select the column, open "Selected Column", then "Padding".
  2. Enter one value for all sides, or switch to the per-side inputs for individual control.
  3. Pick a unit. Pixels give you exact control; em keeps the padding in proportion to the text size.
  4. Uncheck "Same value for all resolutions" to give phones a tighter value than desktops — this is one of the most common per-device adjustments.
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.

Watch out for

  • Padding adds to the visible size of the column. A column that is 300px wide with 20px of padding on each side takes up 340px unless the layout says otherwise.
  • Negative values and "auto" are deliberately not offered here. If you are trying to pull content outward, you want a negative Margin.
  • Padding on an inline piece of text (for example an r-text component with an "Enclosing Tag" of span or em) behaves oddly: left and right padding apply, but top and bottom padding overlaps the lines above and below. Choose a block tag such as p or div if you need vertical padding.

Related settings

For developers

The technical reference for what this setting produces: MDN: padding. 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