Hey – it’s Kayla from the Wix Studio team.
I’m going to show you how to position elements using docking, margins and padding.
Docking defines which edges of a parent container an element will stick to. Margins define how far away the element stays from those edges. Padding creates space inside a section or container and the content inside.
I’ll cover how auto-docking works and how to change docking behavior, along with how to use margins and padding.
Let’s get to it.
Docking is especially useful when you don’t want all elements in your design set to scale proportionally, and you want to control their position when the screen resizes.
For example, if I have a section set as Fit to screen. If I want an element to stay to the top right, even as the height of this section screen size changes, I’ll dock it to the top right and it keeps that position.
If I want it to stay to the bottom right instead, I’ll need to dock it to the bottom and right side.
Wix Studio has a smart docking system, so when you add an element to the canvas and drag it around, it automatically docks to the top and nearest edges of its parent. You can see where it’s docked from these dotted lines.
I can dock elements manually from here in the Inspector – just change it yourself and that’ll override the auto docking.
To turn auto-docking back on, just toggle this switch.
If I want to dock to the bottom, I can drag it down to the edge and it snaps right into place.
You can also dock elements to the center. When I move this element close to the horizontal center, it snaps to the center line.
Now it’s only docked to the top – not to the left or right.
If I center it vertically as well, it’s completely docked to the center.
To quickly align elements, you can use these icons. Using these also affects the auto docking.
I have this element centered, now I’ll align it left. If I look at the position, it’s only docked to the left side.
If I move it up or down at all, it keeps that left docking but also docks to the top again as well.
Same thing if I align it right. It docks to the right and top.
Alright. I’ll add another element, and this time dock it manually.
When I set the docking myself, it keeps the docking I set, even as I drag it towards different edges.
But if I switch on auto docking again, the properties I set get overridden, and it goes back to docking to the nearest edge.
ADJUSTING MARGINS AND PADDING
So that’s docking – it’s used to set the element's position relative to the edges of its parent. Margins define a certain distance between the element and those edges.
Margins are set automatically when you drag and drop an element, but you can set them precisely from here.
You can set padding inside a section or container to create space between its edges and the content inside.
By default, margins and padding are in percentage. That means the distance between the element and the edge is relative to the parent container’s width.
Or I can set these margins to viewport width or viewport height. That sets the margin relative to either the width or height of the browser window.
I could change that to pixels instead, and that would mean it's a fixed distance. It stays the same at any screen size.
And that’s it for how to control docking, margins and padding to position elements.
See you next time.
