How to Add Margin to a Section in Wix Studio
Margins are one of those layout controls that look simple on the surface but quietly drive how polished — or cramped — a finished website feels. In Wix Studio, adding margin to a section gives you precise control over the breathing room around your content, and understanding how it works will save you a lot of trial-and-error.
What "Margin" Actually Means in Wix Studio
Before touching any settings, it helps to be clear on what margin does versus what it doesn't.
Margin is the space outside an element — the gap between that element and whatever surrounds it. Padding, by contrast, is the space inside an element, between its edges and its content.
In Wix Studio, sections are the full-width containers that stack vertically down your page. When you add margin to a section, you're pushing other sections or page boundaries away from it. When you add padding, you're pushing the content inside the section away from its own edges.
Most spacing adjustments people think of as "margin" in Wix Studio are actually applied as padding on the section, because sections are full-width blocks and their outer margins interact with the page container differently than a standard CSS box model element would. Knowing this distinction prevents a lot of confusion.
How to Add Margin (and Spacing) to a Section in Wix Studio 📐
Step 1: Select the Section
Click directly on the section you want to adjust. You'll see a blue outline appear around it confirming it's selected. Make sure you've selected the section itself and not a container, column, or individual element inside it.
Step 2: Open the Inspector Panel
With the section selected, look to the right side of your screen. The Inspector panel (sometimes called the Properties panel) will display the section's settings. This is where spacing controls live.
Step 3: Navigate to the Spacing Controls
In the Inspector panel, look for the Layout or Spacing section. You'll find fields for:
- Padding Top / Bottom / Left / Right — controls inner spacing
- Margin Top / Bottom — controls outer spacing between this section and adjacent sections
Wix Studio uses a visual spacing control that lets you click on each side individually or toggle to set all sides at once. You can input values in pixels (px), percentages (%), or — in some contexts — viewport units (vw/vh).
Step 4: Enter Your Values
Click the margin field you want to adjust and type a value. Wix Studio will preview the change live in the editor, so you can see the effect immediately without publishing.
To add equal margin on multiple sides quickly, look for the link icon between the fields — when linked, changing one value updates all connected sides simultaneously.
Section Margins vs. Section Padding: Which Should You Use?
| Goal | Use Margin | Use Padding |
|---|---|---|
| Space between two sections | ✅ Yes | ❌ No |
| Space between section edge and its content | ❌ No | ✅ Yes |
| Push content down from section top | ❌ No | ✅ Yes |
| Create gap above/below the section block | ✅ Yes | ❌ No |
For most visual spacing adjustments within a section — like giving a headline more room at the top — padding is the right tool. For gaps between sections, margin is what you want.
Responsive Breakpoints Matter Here 🖥️
Wix Studio is built around responsive design, which means your margin and padding values can — and often should — differ across screen sizes. A margin of 80px might look generous on desktop but excessive on mobile.
In Wix Studio, you can switch between breakpoints using the toolbar at the top of the editor (Desktop, Tablet, Mobile). Spacing values set at one breakpoint do not automatically inherit to smaller breakpoints in all cases, depending on your site's responsive setup.
Key variables that affect how margins behave:
- Whether you're using Flex layout or fixed positioning inside the section
- Whether the section uses a full-width stretch or a constrained content width
- How your grid or stack settings are configured inside the section
- Which breakpoint is active when you set the value
This means the same margin input can produce visually different results depending on how the rest of the section is structured.
When Margins Don't Seem to Work
If you're adding a margin value and nothing appears to change, a few common causes are worth checking:
- You've selected an inner element, not the section itself — margins on child elements may be overridden by the section's layout rules
- A flex or grid container is controlling spacing instead of the margin property — in this case, adjusting gap settings inside the layout will have more effect
- Overlapping padding from an adjacent section is visually canceling out the margin you've added
- The section is set to stretch full-height — certain height settings can override top/bottom margins
Understanding that Wix Studio layers layout systems (CSS grid, flexbox, and its own visual layout engine) means spacing sometimes needs to be approached from the container level, not just the section level.
The Setup Variable No Guide Can Predict
Here's where general instructions hit a wall: the right margin values for your site depend entirely on your layout structure — how many sections you have, whether they use background images or colors that need to bleed edge-to-edge, what breakpoints you've customized, and the overall visual rhythm you're going for.
A section in a portfolio with a dark background bleeding edge-to-edge has completely different margin logic than a section in an e-commerce layout with a constrained content column. Both are valid. Neither follows a universal rule.
The controls are straightforward once you find them — but how you use them is shaped by the specifics of your own design.