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.

Padding

• 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

• 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:

Unit	Example	Meaning
px	24px	Pixels. Fixed size; the easiest to reason about.
rem	1.5rem	Multiples of the site’s base font size (usually 16px, so 1.5rem = 24px). Scales with the visitor’s font settings.
em	2em	Multiples 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

Goal	Padding	Margins
Plain component in the flow of the page	0px all sides	0 / 0 / 32px / 0 (defaults)
Colored band with comfortable breathing room	32px all sides	0 / 0 / 48px / 0
Tall hero with a background photo	96px top and bottom, 32px left and right	0 / 0 / 64px / 0
Two components that belong together	as needed	first: bottom 8px; second: default