Padding is the empty space inside the container, between its edge and the content. Margins are the empty space outside the container, between it and whatever comes before, after or beside it. Both are set per side: Top, Right, Bottom, Left.

Nested rectangles showing margins outside the border, padding inside the border, and the component content in the middle.
Padding is inside the border and shows the background; margins are outside and always transparent.

Padding

The Padding group with four text fields Top, Right, Bottom and Left, all set to 0px.
Padding fields with their default of 0px.
  • Default: 0px on all four sides.
  • Padding matters as soon as the container has a visible background or border: without padding, the text and images touch the colored edge. Typical values are 16px to 48px.
  • Padding is inside the container, so it is covered by the background color or image. Increasing the top and bottom padding is how you make a background band taller.
  • Padding reduces the space left for the content. On a narrow Component Width or in a sidebar, keep padding small.

Margins

The Margins group with four text fields: Top 0px, Right 0px, Bottom 32px, Left 0px.
Margin fields with their defaults. Bottom is 32px so that stacked components are separated.
  • Default: Top 0px, Right 0px, Bottom 32px, Left 0px.
  • The bottom margin is what keeps consecutive components apart. Lower it to bring two related components closer; raise it (64px, 96px) to separate sections more clearly.
  • Margins are always transparent: the page background shows through, never the container background.
  • Left and right margins are handled for you when the component is narrower than 100% — APB centers the component automatically (see Component Width). Leave them at 0px unless a designer asks otherwise; a left or right margin on a 100%-wide component pushes it out of alignment with the rest of the page.
  • Set vertical spacing on one side only (the bottom, as the default does). Mixing top and bottom margins across components makes the spacing between them hard to predict.

Accepted values

Each field takes a number followed by a unit:

UnitExampleMeaning
px24pxPixels. Fixed size; the easiest to reason about.
rem1.5remMultiples of the site’s base font size (usually 16px, so 1.5rem = 24px). Scales with the visitor’s font settings.
em2emMultiples of the component’s own font size.
%5%Percentage of the width of the surrounding area (for all four sides, including top and bottom).

Decimals are allowed (0.5rem). Negative values, values without a unit and anything else are rejected when you save. An empty field means “no rule”: the component then uses whatever spacing the site theme gives it, which is usually none — type 0px when you explicitly want zero.

Examples

GoalPaddingMargins
Plain component in the flow of the page0px all sides0 / 0 / 32px / 0 (defaults)
Colored band with comfortable breathing room32px all sides0 / 0 / 48px / 0
Tall hero with a background photo96px top and bottom, 32px left and right0 / 0 / 64px / 0
Two components that belong togetheras neededfirst: bottom 8px; second: default