Every Element UI V3 component is built on the same set of spacing and layout values. Because each section uses the same content width, the same padding and the same spacing scale, you can paste components from different categories onto one page and they line up without adjustment.
This guide covers the V3 components, which are built with Elementor’s Flexbox containers. The V4 components follow the same spacing principles but are structured differently, with an outer section wrapper and an inner layout. See Understanding the Element UI V4 design system for those.
The 4pt system: the foundation of spacing
Every spacing value in Element UI is a multiple of 4 pixels. Working from one scale gives every section the same visual rhythm and removes guesswork when you add or change elements. The values you will see most often are:
| Value | Multiple of 4 | Typical use |
|---|---|---|
| 8px | 2 × 4 | Icon and label pairs, tight groups |
| 12px | 3 × 4 | Items inside a list, small chips |
| 16px | 4 × 4 | Widgets inside a card |
| 24px | 6 × 4 | Heading, text and button groups |
| 32px | 8 × 4 | Between cards in a grid |
| 40px | 10 × 4 | Between a section heading and its content |
| 60px | 15 × 4 | Between groups of containers |
| 80px | 20 × 4 | Between large columns, tablet section padding |
| 100px | 25 × 4 | Between the two halves of a split layout |
| 120px | 30 × 4 | Top and bottom section padding on desktop |
You will find the same values repeated across components. For example, a heading, paragraph and button stacked together almost always sit 16 to 24px apart, whichever category the component comes from.
White space: room to breathe
White space (or negative space) is the empty area between elements. In Element UI it is treated as a design element in its own right, not what is left over. Generous spacing:
- Improves readability and comprehension
- Creates a clear visual hierarchy
- Separates groups of content without needing lines or boxes
- Makes a page feel calm and considered
When you are unsure, choose the larger value from the scale. Sections that feel cramped are far more common than sections that feel too open.
Containers and gaps
Containers group related elements, and the container’s gap sets the space between the elements inside it. Element UI sets spacing with gaps rather than margins on individual widgets, so a container controls the spacing of everything inside it from one place. As a rule:
- Small gaps (8 to 16px) inside cards and other small containers with a few widgets
- Medium gaps (20 to 40px) between widgets inside a larger content container
- Large gaps (40 to 60px) between groups of child containers, such as a section heading and the grid of cards below it
- Extra large gaps (80 to 120px) between the main columns or rows of a section, such as the text and image halves of a hero
This keeps related content visibly together and unrelated content visibly apart, which is most of what makes a layout easy to read.
The V3 section container
Each V3 component is one parent container (the section) with child containers inside it. The parent uses Elementor’s Boxed content width, so its background runs the full width of the page while its content stays within a set width in the middle. These are the values used on the parent container of almost every V3 component:
| Setting | Desktop | Tablet | Mobile |
|---|---|---|---|
| Content width | Boxed | Boxed | Boxed |
| Boxed width | 1140px | 85% | 90% |
| Padding top and bottom | 120px | 80px | 60px |
| Padding left and right | 60px | 0px | 0px |
Desktop
The boxed width is 1140px. Some layouts need more room, and a wider boxed width of 1280px or 1530px works for those. The 60px padding left and right only comes into play when the browser is narrower than the boxed width plus the padding, and stops the content touching the edges of the screen.
Tablet
The boxed width changes to 85%, which leaves an even margin on each side that grows and shrinks with the screen. Because the percentage width already gives the content room at the sides, the left and right padding is set to 0px. The top and bottom padding drops to 80px.
Mobile
The boxed width changes to 90% and the left and right padding stays at 0px, for the same reason as on tablet. The top and bottom padding drops to 60px.
On tablet and mobile, columns stack or reduce in number, and gaps shrink with them. A 100px gap between two columns on desktop typically becomes 60px on tablet and 40px on mobile, so the spacing stays in proportion to the screen.
Headers are the one exception to the section padding. They use much smaller top and bottom padding (between 0 and 20px) so the navigation bar stays compact.
Consistency and speed
With the same width, padding and spacing scale in every section, a page made of components from different categories reads as one design. It also makes building faster: instead of nudging values until something looks right, you pick from a short list of numbers you already know. For a step by step example of putting a page together, see Combining multiple components to create a full page.
Guidelines, not rules
The design system is here to guide you, not box you in. If your project needs a wider content width, tighter sections or a different scale, change it. As long as you apply your changes consistently across every section, your pages will stay cohesive and easy to maintain.