Studio Editor: Working with Docking, Margins and Padding
In an ever-changing world of devices, it’s important to control your elements' position so they look just as you want on different screen sizes. In the Studio Editor, elements are automatically docked to make sure that happens.
This gives you the freedom to move elements around, without having to worry about positioning across breakpoints. However, you can always set the position, docking and margins on your own from the Inspector panel.
px* (Scale) is the default unit of measure for docking, margins and padding. The px* value you see is the pixel equivalent, relative to your current canvas size. Switch to a different breakpoint to see how the px* value scales automatically.
Positioning elements on the canvas
Using drag and drop, you can set your element's position directly on the canvas, separately for each breakpoint. This allows you to ensure that the element truly looks in place on every screen.
As long as the element remains within the same parent (e.g. section, cell), you can move it around and it does not affect other breakpoints. If you move an element to a different parent (reparent), it applies to all breakpoints.
X and Y coordinates in the Inspector
You can check your element's X and Y coordinates to see its exact position on the current canvas size.
X: The horizontal plane, from the left edge to the right edge of the parent element (e.g. section, container, stack).
Y: The vertical plane, from the top to the bottom of the parent element.
In the example below, you can see the px* value next to Y turning negative as we're moving the button outside of its parent element - the cell.
Automatic and manual docking
When adding a new element in the editor, it's automatically docked to ensure it stays in place on all screens and devices. However, you can always disable auto docking and choose the docking points manually.
Click a topic below to learn more.
Automatic docking in the editor
When you add a new element, it's automatically docked to both:
The top of the parent element (e.g. section, container, stack).
The left or right edge of the parent element - whichever is the closest.
As long as the Element auto docks checkbox is on, you can move elements freely and the docking points adjust for you - no need to "re-dock".
The docking position is indicated by the dotted lines on the element, and the docking points in the Inspector panel (under Position). In the example below, the container is automatically docked to the top and left sides of the grid cell.
Note: If you place the element in the exact center of its parent (using the Align to center icon
, for example), it does not get automatically docked to any corner.
Adjusting the docking manually
You can override the automatic docking and set it manually from the Inspector. Dock an element to any side; to the top, bottom, left, right or center of the section, container, or cell it's in. This is useful, for example, when you want to dock an element to the bottom instead of the top.
Select the relevant element.
Click the Open Inspector icon
at the top right of the editor.
Scroll down to Position.
Click the relevant docking points: Top
, Bottom
, Right
or Left
.
Note: This automatically deselects the Element auto docks checkbox.
Tip:
The Responsive Checker can help you spot elements that should be docked to the bottom of the parent instead of the top, which might be causing gaps on the live site.
Using margins when docking elements
Margins act as a buffer, preventing overlaps with other elements. When an element is docked, margins help keep a set distance between the element and the edges of its parent. You can add margins to the sides that aren't docked as well.
To create or edit a margin:
Select the relevant element.
Click the Open Inspector icon
at the top right of the editor.
Scroll down to Position.
Enter a value for the relevant margin (left, right, top or bottom).
Tip:
The Responsive Checker can help you spot unnecessary margins as they could limit your ability to resize the parent.
Adding padding around responsive containers
Add padding to containers to create a space between the edges (top, bottom or sides) and the content inside. Padding can be added to all types of responsive containers, including basic containers, stacks, flexboxes, repeaters, cells, sections and pages.
Once you add padding, you can adjust it directly on the canvas using drag and drop. Select the responsive container and hover over the padding to see this option.
To add padding:
Select the relevant element.
Click the Open Inspector icon
at the top right of the editor.
Scroll down to Layout.
Choose what padding you want to edit:
A specific side
: Click the icon and enter the value for the relevant side(s) - left, right, top or bottom.
Horizontal padding
: Enter a value for the left and right padding.
Vertical padding
: Enter a value for the top and bottom padding.
Preventing elements from overlapping
When positioning elements, it's important to make sure they don't overlap on smaller breakpoints. To prevent this from happening, check out our tips below.
Docking to the top
It's usually a good idea to dock your elements to the top of the container, section or grid cell that they are in. This ensures that there is always a defined space between the element and the container/section when more content is added to your page.
Adding cells to organize the layout
For more complex layouts, add cells to organize the section. Place elements inside their own cells and dock them to a grid line so they're positioned perfectly on every screen size.
Applying a stack
Putting a group of elements in a horizontal or vertical stack ensures they don't overlap. A stack is a flex container that automatically adjusts to different screen sizes - you just need to set the margins between elements.
Tip:
Using negative margins, you can make elements overlap in a stack. This lets you place elements in front of others, creating a more intricate design.
Troubleshooting:
If you're currently seeing unwanted overlaps between elements, check out this troubleshooting guide.
FAQs
Click a question below to learn more.
Why can't I see the margin and padding indications on the canvas?
If you can't see them, you may need to turn on the relevant canvas indication:
Click the Wix Studio icon
at the top left.
Hover over View.
Hover over Canvas Indications.
Make sure Margins / Padding are checked.
Can I use units other than px* when setting margins and padding?
Absolutely, we offer several fixed and fluid units to meet your design needs.
Click the current unit to switch it to another. You can apply the same unit to all sides simultaneously, or choose a different one for each side.
How can I ensure consistent alignment of elements across all screen sizes?
To ensure consistent alignment, use the following best practices:
Adjust docking settings in the Inspector panel and use the alignment icons at the top to align elements to the top, bottom, left, or right as needed.
Tip: You can group elements to align them all at once.
Stack related elements together to prevent them from shifting independently.
Test your design on all breakpoints (desktop, tablet, and mobile) using the resize handles in the editor to catch any alignment issues.
Tip: Start editing from the desktop view, as changes cascade down to smaller breakpoints (tablet and mobile). This helps maintain consistency across all devices.
How can I fix large gaps or unwanted white space, especially on mobile?
We recommend the following:
Check the padding and margin settings for sections, containers, and elements in the Inspector panel.
Reduce unnecessary bottom docking values, which may cause excessive spacing.
Ensure that related elements are stacked properly to avoid unintended gaps.
Adjust the height of sections to 'Fit to Screen' or set it to a fixed pixel value.
Tip: Check out this detailed troubleshooting tutorial for more information.
What should I do if some elements are cut off on mobile or desktop?
Check for negative docking or excessive margins in the Inspector panel, as they may restrict the element's visibility.
If the element is close to the page's edges, hover over it to make sure it does not extend beyond the page.
Tip for images: If the suggestions above didn't resolve the issue, try resetting the image and adjusting its focal point as outlined in this troubleshooting tutorial.