Element UI V4 components use the same spacing principles as the V3 components: a 4pt scale, generous white space and gaps that group related content. What changed is the structure. V4 is built with Elementor’s new elements (Div block, Flexbox and Grid), which have no Boxed content width setting. Instead, each section is made of two layers: a full-width outer wrapper and an inner layout that sets the content width and the side spacing.
This guide explains that structure and the values behind it. If you work with the V3 components, see Understanding the Element UI V3 design system.
The section structure
Every V4 section follows the same three-layer pattern:
- Section wrapper. A Div block with the HTML tag set to
section. It is 100% wide and holds the section’s background color and its top and bottom padding. Its left and right padding is 0px, so the background always runs edge to edge. - Inner layout. A Flexbox (or a Div block) inside the wrapper, 100% wide with a maximum width of 1260px and left and right margins set to auto, which centers it. It holds the left and right padding, and the gap between the main parts of the section.
- Content. Flexbox containers for rows and stacks (a heading with its text and button, two columns side by side) and Grid containers for collections such as cards, team members, stats and logos.
In the Navigator, a typical section looks like this:
Section (Div block)
└── Inner layout (Flexbox)
├── Heading group (Flexbox)
└── Cards (Grid)
└── Card (Flexbox)Splitting the job this way keeps each setting in one place. To change a background or the space between sections, edit the wrapper. To change how wide the content runs or how close it comes to the edge of the screen, edit the inner layout. The content inside never needs to know about either.
Section values by device
| Setting | Element | Desktop | Tablet | Mobile |
|---|---|---|---|---|
| Padding top and bottom | Section wrapper | 120px | 80px | 60px |
| Padding left and right | Section wrapper | 0px | 0px | 0px |
| Max width | Inner layout | 1260px | 1260px | 1260px |
| Margin left and right | Inner layout | auto | auto | auto |
| Padding left and right | Inner layout | 60px | 40px | 20px |
The 1260px maximum width includes the inner layout’s 60px padding on each side, so the content itself is 1140px wide on desktop. That is the same content width as the V3 components, so V3 and V4 sections line up when they sit on the same page.
The top and bottom padding is the same 120px, 80px and 60px used in V3. The side spacing is where V4 differs. V3 sets a percentage width on tablet and mobile (85% and 90%); V4 uses a fixed 40px on tablet and 20px on mobile. A fixed value gives the same side spacing on every phone and tablet, and it matches the way the rest of the component is spaced, in pixels from the 4pt scale.
Some sections use a narrower inner layout where shorter lines read better. Some FAQ and logo sections use a maximum width of 1120px (1000px of content), and heading groups are often capped at 750px, or 520px beside an image.
The 4pt system still applies
Every spacing value in V4 comes from the same 4pt scale as V3: 8, 12, 16, 20, 24, 32, 40, 48, 60, 80, 100 and 120px. Because V4 gives you a gap on every Flexbox and Grid, the scale is used even more consistently than in V3. A few tight pairs, such as a form label and its field, use a smaller half step like 6px.
White space and gaps
White space matters just as much in V4. Spacing is set with the gap on each Flexbox and Grid rather than with margins on individual elements, so one container controls the spacing of everything inside it. Text elements have their own padding and margin set to 0px, which means the gaps you set are exactly the gaps you see. As a rule:
| Gap | Where it is used |
|---|---|
| 6 to 16px | Inside cards, between form fields, icon and label pairs |
| 16 to 24px | Between a heading, its text and its button |
| 24 to 32px | Between cards in a grid |
| 40 to 60px | Between a section heading and its content |
| 80 to 100px | Between the two halves of a split layout |
Gaps shrink on smaller screens so the spacing stays in proportion. A 100px gap between two columns on desktop typically becomes 60px on tablet and 40px on mobile, with the columns stacking. Grids drop from three or four columns on desktop to two on tablet and mobile.
Adapting the system
To change the layout of a section after you paste it:
- Background or section spacing: select the section wrapper and change its background or its top and bottom padding.
- Content width: select the inner layout and change its maximum width. Remember it includes the side padding, so a 1440px maximum width with 60px padding gives 1320px of content.
- Side spacing: change the inner layout’s left and right padding on each device.
- Spacing between elements: change the gap on the Flexbox or Grid that holds them.
Every value is a local style on the element, so a change to one section does not affect the others. If you use your own variables or global classes, you can swap the local values for them. How to use the V4 components explains why the styles are local and how to restyle a component.
Guidelines, not rules
Like the V3 system, these values are a starting point. If your project needs a wider layout, tighter sections or a different scale, change them, and apply the change the same way across every section so your pages stay consistent.