Skip to content

Spacing and layout

This page shows how spacing and borders control the room around, inside, and between the elements on your website.

The box model

Every element sits inside a box built from layers. Space radiates out from the content: padding sits inside the border, and margin sits outside it. You will find the same controls in the Elementor editor, so what you learn here applies when you build your pages.

Margin
Border
Padding
Content
  • MarginSpace pushing other elements away, outside the border.
  • BorderThe edge of the box, between padding and margin.
  • PaddingBreathing room inside the box, around the content.
  • ContentYour text, image, or nested elements.

The examples below are interactive. Change the values to see how each one shapes the box. Each field has its own unit dropdown, and the link button changes every side at once.

Margin

Margin is the space outside an element. It pushes the element away from the ones next to it. Increase the margin to give an element more room from its neighbours.

Margin
Content box

Padding

Padding is the space inside an element, between its edge and its content. Increase the padding to give the content more room without moving the element itself.

Padding
Content box

Border

Border is the line drawn around the edge of an element. It sits between the padding and the margin. You set how thick it is on each side.

Border
Content box

Border radius

Border radius rounds the corners of an element. A small value softens the corners; a large value can turn a square into a pill or a circle. You can round each corner by a different amount.

Border radius
Content box

Gap

Gap is the even space between items that sit in a row or a column, such as the columns in a section. Instead of adding a margin to each item, you set one gap and every item is spaced the same.

Gap

Units

Each field lets you choose a unit. The unit decides what the number means.

Unit What it means When to use it
PX A fixed size in screen pixels. The value stays the same everywhere. Precise, predictable spacing.
% A share of the parent element's width. For margin and padding, the percentage is measured against width, even at the top and bottom. Spacing that scales with the layout.
EM Relative to the element's own font size. If the text is 20px, 1em is 20px. Spacing that stays in proportion to the text.
REM Relative to the page's base font size, so the element's own font size does not affect it. Consistent spacing across the whole site.
VW One percent of the browser window's width. Spacing that grows and shrinks with the screen width.
VH One percent of the browser window's height. Spacing based on the screen height.

The Border control does not offer %, because a border's thickness cannot be set as a percentage.

For colours, fonts, and overall styling, see Themes and design.