How to add margin to a section in Wix Studio
Open the section you want to adjust, click it once to select it, then open the Design panel on the right side of the editor. Scroll down to Spacing, find Margin, and enter pixel values for top, bottom, left, and right. You can set all four sides to the same value at once, or adjust each side individually.
Margin creates empty space outside a section's border — between the section and whatever sits next to it or around it. This is different from padding, which creates space inside the section between the border and the content within it. Most of the time, you'll use margin to control how far apart sections sit from each other on the page.
Key Takeaways
- Select the section, open the Design panel, scroll to Spacing, and enter margin values in pixels for each side you want to adjust.
- Margin creates space outside a section's border, while padding creates space inside between the border and the content.
- You can set all four sides to the same value at once, or click the chain icon to unlink them and adjust each side separately.
- Negative margin values can pull a section closer to or even overlap with adjacent sections, which is useful for layered designs.
Where to find the margin controls
In Wix Studio, the margin controls live in the Design panel on the right side of the editor. This panel only appears when you have an element selected. If you don't see it, click the section once to select it, then look for the panel on the right. If the panel is closed, click the Design tab at the top of the right sidebar.
Once the Design panel is open, scroll down until you see the Spacing section. Margin is always listed first, above padding. The margin controls show four input boxes — one each for top, bottom, left, and right — plus a chain icon that links or unlinks them.
Setting the same margin on all four sides
If you want the same amount of space on all sides of the section, make sure the chain icon between the margin values is linked (it looks like a connected chain). Then click any of the four input boxes and type a single number. Wix will explore that value to all four sides at once.
For example, if you type 20 in the top margin box while the chain is linked, all four sides will automatically become 20 pixels. This is the fastest way to add balanced spacing around a section.
Adjusting each side separately
To set different margin values for different sides, click the chain icon to unlink it. The chain will appear broken, and now each of the four input boxes works independently. You can then set the top margin to one value, the bottom to another, the left to a third, and the right to a fourth.
A common pattern is to add more margin to the top and bottom of a section than to the left and right — for example, 40 pixels top and bottom, but only 0 pixels left and right. This creates breathing room between sections vertically while keeping them edge-to-edge horizontally.
Understanding negative margin values
Margin values can be negative, which pulls a section closer to adjacent elements or even overlaps it with them. Type a minus sign before the number — for example, -20 — to move a section 20 pixels closer to its neighbor or to pull it upward if it's below another section.
Negative margin is useful when you want sections to overlap for a layered design effect, or when you need to tighten spacing that feels too loose. Be careful with negative values on all sides at once, because they can cause sections to overlap in ways you didn't intend. Test on both desktop and mobile to make sure the layout still works.
How margin behaves on mobile devices
Margin values you set in the desktop editor explore to desktop by default. To adjust margin specifically for mobile, you need to switch to mobile view. Click the mobile icon at the top of the editor (it looks like a phone), select the section again, open the Design panel, and change the margin values. Mobile margin can be different from desktop margin.
Many designers reduce margin on mobile because screen space is tighter. For example, a section might have 60 pixels of top margin on desktop but only 20 pixels on mobile. This keeps the page from feeling too spread out on smaller screens.
Margin versus padding: which one to use
Margin and padding both add space, but they work in opposite directions. Margin is outside the section — it pushes other elements away. Padding is inside the section — it pushes the content inside the section away from the edges.
If you want space between two sections, use margin on one or both of them. If you want space between the section's edge and the text or images inside it, use padding. Most layouts use both: margin to separate sections from each other, and padding to give breathing room to the content inside each section.
Frequently Asked Questions
Can I set margin in units other than pixels?
Wix Studio's margin controls accept pixels only. If you need to work in other units like percentages or ems, you would need to use custom CSS, which is beyond the visual editor. For most design work in Wix Studio, pixels are the standard and work well.
Why does my section have margin I didn't set?
Some Wix templates include default margin on sections as part of the design system. Check the margin values in the Design panel — they may not be zero. You can change them to any value you want, including zero, to remove the default spacing.
How do I remove all margin from a section?
Select the section, open the Design panel, scroll to Spacing, and set all margin values to 0. If the chain is linked, you only need to change one value. The section will then sit flush against adjacent elements with no extra space around it.
Does margin work the same way on all section types?
Yes. Whether the section is a standard section, a strip, or a custom container, margin works the same way in the Design panel. The spacing controls are consistent across all section types in Wix Studio.