What margin does and where to find it in Wix Studio

Margin is the empty space outside a section's border — it pushes the section away from other elements on the page. In Wix Studio, you add margin through the Design panel on the right side of the editor. When you select a section, the margin controls appear in the spacing section of that panel, separate from padding (which is space inside the section).

The reason margin matters is that it controls how your sections relate to each other. A section with no margin sits flush against the next element. A section with margin creates breathing room. On mobile devices, margin becomes even more important because space is tight and crowded sections become hard to read.

Wix Studio shows you margin visually as you adjust it — you'll see the space grow or shrink in real time on the canvas. This makes it easier to get the spacing right without guessing.

Key Takeaways

  • Select the section you want to adjust, then open the Design panel on the right and find the spacing section to see margin controls.
  • Margin pushes a section away from other elements, while padding pushes content away from the section's edge — they are not the same thing.
  • You can set margin on all four sides at once, or adjust top, bottom, left, and right separately depending on your layout needs.
  • Mobile layouts often need different margin values than desktop, so check your responsive breakpoints after you set desktop margin.

Selecting the section and opening the Design panel

Click directly on the section you want to add margin to. The section will show a blue outline when it is selected. If you accidentally select an element inside the section instead, click the section's border or use the layers panel on the left to find and select the section itself.

Once the section is selected, look at the right side of the screen. The Design panel should be open by default. If you see a different panel (like Content or Settings), click the Design tab at the top of that panel. The Design panel shows all the styling options for the selected section, organized into collapsible sections like Colors, Typography, and Spacing.

Finding and using the spacing controls

In the Design panel, scroll down until you see the Spacing section. Click it to expand if it is collapsed. You will see two sets of controls: one for padding and one for margin. Margin is usually listed below padding. The margin controls show four input fields or a single field with a chain link icon, depending on whether you have linked all sides together.

If the chain link icon is connected, changing one value changes all four sides at once. If the chain is broken, you can set each side independently. Click the chain icon to toggle between linked and unlinked mode. For most layouts, linked margin (the same value on all sides) is the starting point — you can unlink it later if you need different spacing on different sides.

Setting margin values for desktop

Type a number into the margin field. Wix Studio measures margin in pixels by default. Start with a value like 20 or 30 pixels and watch the canvas — you will see the space around your section grow. If the spacing looks too tight, increase the number. If it looks too loose, decrease it.

Common margin values are 16, 20, 24, 32, and 40 pixels, depending on how much breathing room you want. There is no single correct value — it depends on your design. A section with a lot of text might need more margin than a section with just an image.

If you need different margin on different sides, click the chain icon to unlink the values. Then you can set top margin, bottom margin, left margin, and right margin separately. For example, you might want 40 pixels of margin below a section but only 20 pixels above it.

Checking margin on mobile and tablet sizes

After you set margin on desktop, click the responsive breakpoint buttons at the top of the canvas to see how your section looks on tablet and mobile. The buttons usually show icons for desktop, tablet, and mobile sizes. On smaller screens, your margin might look too large or too small because the overall space is tighter.

If the margin does not look right on mobile, you can set different values for each breakpoint. In the Design panel, you will see a breakpoint selector (usually showing "Desktop" or similar). Switch to the mobile breakpoint, then adjust the margin values for that size only. This way, your desktop layout can have generous spacing while your mobile layout uses less margin to save space.

The difference between margin and padding

Margin and padding are straightforward to confuse because they both create space, but they work in opposite directions. Margin is outside the section — it pushes the section away from other elements. Padding is inside the section — it pushes the content (text, images, buttons) away from the section's edge.

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 content inside it, use padding. In practice, you often use both: margin to space sections apart, and padding to give the content room to breathe inside each section.

Troubleshooting margin that does not appear to work

If you set margin and nothing seems to change, check whether the section is inside a container or grid. Some parent elements override margin on their children, or they have their own spacing rules. Click the parent element (the container or grid that holds your section) and check its spacing settings.

Another common issue is that margin collapses between sections. If two sections are stacked vertically and both have margin, Wix Studio uses the larger of the two values instead of adding them together. This is normal behavior and usually looks better than the margins stacking. If you want more space, increase the margin on one section rather than relying on both margins to add up.

If margin is set but the section still looks cramped, you might actually need padding instead. Select the section, go to the Spacing section in the Design panel, and check the padding values. Increase padding if the content inside the section needs more room.

Frequently Asked Questions

Can I set different margin on each side of a section?

Yes. In the Spacing section of the Design panel, click the chain link icon to unlink the margin values. Then you can enter separate numbers for top, bottom, left, and right margin. This is useful when you want a section to have more space below it than above it, for example.

What happens if I set margin to zero?

The section will sit flush against the next element with no space between them. This is sometimes the right choice for a full-width section or a section that should touch the edge of the page, but it usually makes layouts feel cramped. Most sections benefit from at least 16 to 20 pixels of margin.

Does margin work the same way on mobile as it does on desktop?

Margin works the same way, but you often need different values for different screen sizes. Switch to the mobile breakpoint in the Design panel and adjust margin separately for mobile. Smaller screens usually need less margin to avoid wasting space.

Can I use negative margin in Wix Studio?

Wix Studio typically does not allow negative margin values in the Design panel. If you need elements to overlap or move closer together than zero margin allows, use padding on the parent element or adjust the layout structure instead.

Should I use margin or padding to space content inside a section?

Use padding. Padding is the space inside the section between the edge and the content. Margin is for space outside the section between it and other elements. Using padding keeps your spacing predictable and makes the section easier to style consistently.