margin padding spacing box-model css

Margin and padding

Margin and padding are the two spacing properties you will adjust constantly in Site Designer. Understanding the difference between them — and the quirks of each — will save you hours of trial-and-error.

The core difference

Padding is space inside the element, between its content and its border. Padding takes on the element’s background color.

Margin is space outside the element, between its border and neighboring elements. Margin is always transparent — you see whatever is behind the element.

A simple mental model: padding is the cushion inside a picture frame; margin is the gap between frames on a wall.

The four sides

Both margin and padding have four sides: top, right, bottom, and left. In Site Designer’s Style pane, the visual spacing editor displays a box diagram where you can click each side independently.

Click the center of the diagram to set all four sides at once. Click a specific side to set only that one.

CSS shorthand follows a clockwise order from the top:

/* All four sides */
margin: 16px;

/* Top/bottom | Left/right */
margin: 16px 24px;

/* Top | Left/right | Bottom */
margin: 16px 24px 8px;

/* Top | Right | Bottom | Left */
margin: 8px 16px 24px 16px;

Negative margins

Margins can be negative, and this is valid, useful CSS. A negative margin pulls the element toward that side, allowing elements to overlap. It is commonly used to:

Pull a headline partially over an image
Remove unwanted default margins on list items
Create subtle overlap between cards in a grid

Site Designer accepts negative values in any margin field — type a minus sign followed by the value.

margin: auto for centering

A classic centering technique: give a block element a defined width and set margin-left: auto and margin-right: auto (or the shorthand margin: 0 auto). The browser distributes the remaining horizontal space equally on both sides, centering the element in its container.

This does not work without a specified width, and it does not center elements vertically. For vertical centering, use Flexbox or Grid.

Margin collapsing

Adjacent vertical margins can collapse — combining into a single margin equal to the larger of the two values. This is a core CSS behavior that surprises many people.

For example: a <p> with margin-bottom: 24px followed by another <p> with margin-top: 16px produces a gap of 24 px, not 40 px. The margins collapse to the larger value.

Margin collapsing only happens:

Between vertically adjacent block elements
Between a parent and its first or last child when there is no border, padding, or content separating them

Flexbox and Grid containers do not participate in margin collapsing.

Padding on inline elements

Padding applies to inline elements (like <span>, <a>, <em>), but top and bottom padding do not affect line height for surrounding text lines. The padding box is visible (and the background fills it), but the text above and below is not pushed away. Use line-height or display the element as inline-block if you need vertical space to take effect.