How to add margin to a section in Wix Studio

Open Wix Studio and navigate to the page where your section lives. Click directly on the section itself — not an element inside it, but the section background or edge. Once selected, the section will show a blue outline. On the right side of the screen, you'll see the Design panel. Look for the Spacing section, which contains both margin and padding controls. Click on the margin icon (usually shown as space outside a box) and enter your values in pixels.

Wix Studio lets you set margin on all four sides at once, or control each side separately. If you want the same margin on all sides, enter one number. If you want different margins on top, right, bottom, and left, click the chain icon to unlink the values, then enter each one individually. The preview updates as you type, so you'll see the spacing change in real time on your canvas.

Key Takeaways

  • Select the section itself by clicking its background or outer edge, not an element inside it.
  • The Spacing section in the Design panel on the right contains both margin and padding controls.
  • You can set all four margins to the same value at once, or unlink them to set each side separately.
  • Margin pushes space outside the section, away from other elements; padding pushes space inside the section, away from its contents.
  • Changes appear instantly on your canvas as you adjust the numbers.

Understanding margin versus padding in Wix Studio

Margin and padding are two different kinds of spacing, and mixing them up is the most common mistake. Margin is the space outside your section — it pushes other elements away from it. Padding is space inside your section — it pushes the content (text, images, buttons) away from the section's edges.

If you want breathing room between your section and the next section below it, use margin. If you want your text to sit further away from the top edge of the section, use padding. Both live in the same Spacing panel, so check which one you're adjusting before you enter a number.

Setting different margins on each side

By default, Wix Studio links all four margins together. This means if you enter 20 pixels, all four sides get 20 pixels. To set different values on different sides, look for the chain icon next to the margin values and click it. The chain will break, and you'll see four separate input fields for top, right, bottom, and left.

A common setup is to add more margin on the bottom than the top — for example, 10 pixels on top and 30 pixels on bottom — to create visual separation from the section below. Enter each value in its field, and the preview updates immediately. If you want to go back to linking all sides, click the chain icon again.

Using margin to control spacing between sections

Sections stack vertically on a page, and margin is the tool that controls how much white space sits between them. If two sections feel too close together, add bottom margin to the upper section or top margin to the lower section — or both. Start with 20 to 40 pixels and adjust based on what looks right to you.

On mobile devices, you may want less margin to save vertical space. Wix Studio lets you set different margin values for different screen sizes. Look for the breakpoint selector at the top of the Design panel (usually showing "Desktop" or "Tablet" or "Mobile"), switch to the mobile view, and adjust the margin separately. This way your spacing adapts to the device your visitor is using.

Fixing sections that overlap or have unexpected spacing

If a section is overlapping another section or sitting too close, the problem is usually margin set to zero or a negative value. Click the section and check the Spacing panel. If the margin shows 0, increase it. If it shows a negative number (like -10), change it to a positive number or zero.

Another common issue is confusing margin with padding. If your content inside the section is too close to the edges, you need padding, not margin. Padding sits inside the Spacing panel right below margin. Increase the padding value instead, and your content will move away from the section edges while the section itself stays in the same place.

Saving and testing your margin changes

Wix Studio saves your changes automatically as you work, so you don't need to click a save button. However, always preview your page before publishing to make sure the spacing looks right. Click the Preview button at the top right of the editor to see your page as a visitor would see it.

Pay special attention to how sections look on mobile. Switch to mobile preview mode and scroll through your page. If margins look too large on a phone screen, go back to the editor, select the mobile breakpoint, and reduce the margin values for that screen size. This ensures your page looks balanced on every device.

Frequently Asked Questions

Can I set negative margin in Wix Studio?

Yes, but use it carefully. Negative margin pulls a section closer to or overlapping other elements. This is useful for creative layouts, but it can cause sections to overlap in ways that hide content. If you use negative margin, preview your page on all screen sizes to make sure nothing gets hidden.

What's the difference between margin and padding again?

Margin is space outside the section, pushing other elements away. Padding is space inside the section, pushing the content away from the edges. If you want space between two sections, use margin. If you want space between the section edge and the text inside it, use padding.

Do I need to set margin on every section?

No. Sections stack naturally with some default spacing. Only add margin when sections feel too close together or when you want a specific amount of white space. Start by previewing your page without custom margin, then add it only where it improves the look.

Will my margin settings change when I switch to mobile view?

Not automatically. Your desktop margin stays the same unless you specifically change it for the mobile breakpoint. To set different margin for mobile, select the mobile breakpoint in the Design panel, then adjust the margin values. This lets you optimize spacing for smaller screens.

Can I copy margin settings from one section to another?

Wix Studio doesn't have a direct copy-paste for spacing values, but you can write down the numbers and enter them manually in the next section. If you're using the same spacing across many sections, consider creating a reusable section or component so you only set the margin once.