Adding margin to a section in Wix Studio

Open the section you want to edit by clicking on it in the canvas. On the right side of the screen, the Design panel will show. Click the Spacing tab (it looks like a square with arrows pointing outward). You'll see four input fields labeled Top, Right, Bottom, and Left — these control your margin. Enter a pixel value in any field to add space between that edge of the section and whatever sits next to it.

Margin pushes outward from your section's border. If you add 20 pixels of top margin, the section moves 20 pixels down from whatever is above it. This is different from padding, which adds space inside the section, between the border and the content within.

You can set all four sides to the same value by typing a number and pressing Enter, or you can set each side individually. Wix Studio will apply the change instantly on the canvas so you can see the result.

Key Takeaways

  • Click any section, then open the Design panel on the right and select the Spacing tab to access margin controls.
  • The four input fields (Top, Right, Bottom, Left) let you add space between the section and surrounding elements in pixels.
  • Margin pushes outward from the section border, while padding adds space inside the section around its content.
  • Changes appear instantly on the canvas, so you can adjust and preview without saving or refreshing.

Understanding margin versus padding in Wix Studio

Margin and padding are easy to confuse because both add space, but they work in opposite directions. Margin creates distance between your section and other elements on the page — the space outside the section's border. Padding creates distance between the section's border and the content inside it.

If you want to push a section away from the header above it, use margin. If you want to push the text or images inside the section away from the edges, use padding. You'll find padding controls in the same Spacing tab, below the margin fields.

Setting margin values for different screen sizes

Wix Studio lets you set different margin values for desktop, tablet, and mobile views. After you enter a margin value on the desktop view, click the tablet icon or mobile icon at the top of the Design panel to switch to those breakpoints. The margin values you set for desktop will carry over, but you can change them for smaller screens.

This is useful because a section that needs 40 pixels of margin on desktop might look better with 20 pixels on mobile, where space is tighter. Set each breakpoint separately so your layout looks balanced on every device.

Using negative margin to overlap sections

Negative margin values let you pull a section closer to or even overlap with elements around it. In the Spacing tab, enter a negative number (like -20) to move the section inward. This is often used to create layered or overlapping design effects.

Be careful with negative margins on sections that contain interactive elements like buttons or forms — overlapping can make those elements hard to click. Test on all screen sizes to make sure nothing becomes unusable.

Resetting margin to default

If you've added margin and want to remove it, go back to the Spacing tab and clear the input fields or set them to 0. Wix Studio will remove the margin and the section will sit flush against adjacent elements.

You can also click the reset icon (usually an arrow or circular symbol) next to the Spacing controls to return all margin values to their default state at once.

Common margin mistakes and how to fix them

The most common mistake is adding margin when you meant to add padding. If you add top margin to a section and the content inside shifts down with it, you've added margin to the wrong element — you probably wanted padding instead. Click inside the section to select the inner content container and add padding there.

Another frequent issue is forgetting to set margin for mobile. A section with 60 pixels of margin on desktop can look cramped or off-center on a phone. Always check your tablet and mobile breakpoints and adjust margin values so the layout looks intentional on every size.

Frequently Asked Questions

Can I add margin to individual elements inside a section, or only to the section itself?

You can add margin to any element — sections, containers, text boxes, images, buttons, and more. Click the element you want to adjust, open the Design panel, and use the Spacing tab. The process is the same whether you're adjusting a whole section or a single button inside it.

What's the difference between margin and gap?

Margin controls space around a single element. Gap controls space between multiple elements inside a container (like the distance between columns in a grid or items in a flex layout). Use margin for outer spacing and gap for inner spacing between child elements.

Why does my margin look different on mobile than on desktop?

You may have set different margin values for mobile in the Design panel. Switch to the mobile breakpoint view and check the Spacing tab. If the values are different from desktop, that's intentional — Wix Studio lets you customize spacing for each screen size. Change them back to match desktop if that's what you want.

Can I add margin to a section that's inside another section?

Yes. Nested sections work the same way — click the inner section, open the Design panel, and add margin in the Spacing tab. The margin will push the inner section away from the outer section's edges or other elements around it.