How to use Docking, Margins and Padding

Hey, Carly here from the Wix Studio team.

Today we’re diving into docking, margins and padding—three powerful features that let you control the position, layout and behavior of your design across different breakpoints.

Ready? Let’s get into it.

I think a good place to start is to break down the basics.

Docking defines which edges of a parent container an element will stick to…

…while margins are the distance the element will keep from those edges.

And lastly, padding is the space between content inside the container and the edges of the element.

The dotted blue line represents docking.

Here you can see the text element is docked to the top and left edges.

If you look closely, you can also see the numbers adjust as I drag the element around.

Those numbers represent the margins.

They show how much distance there is between the outer edge of the element and the edge parent container.

Now let's see an example of padding.

The text element is right up against the left side of the cell. When I add padding here, it creates a new boundary and the text element is pushed away from the edge.

This creates more internal space between the text element and the edges of the cell.

The default unit for both margins and padding is px* which stands for pixel on canvas.

It’s a fluid unit of measurement in the Studio Editor that lets you edit sizing in pixels while keeping an element responsive.

The px* value you see is the pixel equivalent, relevant to the current canvas size. When you switch to a different breakpoint, the px* value changes automatically.

Cool, now that we’ve covered the basics, let's explore how docking, margins and padding work and what they do.

First up, docking.

It’s a super important feature because it controls how an element is positioned across different screen sizes.

As I mentioned earlier, the dotted blue line represents the edges that an element is docked to.

You’ll notice that the Studio Editor has this really cool automatic docking system.

You can see the element automatically docks to the top and the nearest side, or snaps right to the bottom.

If you want, you can override it by manually adjusting the docking and selecting which edge you want to dock.

To turn the autodocking back on, just select the element and recheck the box.

When you dock an element, you determine its horizontal and vertical positioning within its parent element, like a container, section, or page.

The responsive behavior of this section is automatically set to scale proportionally.

If you set the elements to scale proportionally and keep the autodocking on, the elements and the section they’re in will keep their positioning across all screen sizes.

If your design calls for a mix of responsive behaviors, you may need to make some positioning tweaks.

If you do, it helps to keep the relationship between docking and margins in mind.

Like we saw earlier, docking lines and margin numbers pop up as I drag this element around.

As a reminder, margins show the distance between the element and the edges it’s docked to.

You’ll also notice the px* sign next to the margin because it’s the default measurement unit.

The responsive behavior in this section is set to fit to screen, so the section covers the entire height of the screen.

You can see the title element is docked to the top and left of the screen.

As I make the screen smaller, the title maintains its positioning.

But what if you want to move the title to the bottom left corner?

You can see here that as I drag the title downwards while it’s still docked to the top, and I toggle the handles inwards, the title is pulled up towards the top edge.

When you dock an element, you’re creating a behaviour that keeps the element positioned next to a specific edge across all breakpoints.

Because of how the title is docked, you’ll notice the margins get smaller and the text element gets pushed up higher as I move between breakpoints.

The margins get smaller because they were set with px*.

Remember, margins are calculated by the width of the parent element.

Here, the parent element is the fit to screen section.

When a section’s responsive behavior is set to fit to screen, the section will always be 100% of the height of the screen.

However, as I move to lower breakpoints, the width of the section will get smaller.

Here the screen is 1280 pixels wide, and has a margin that's 784 pixels*.

And since px* is a responsive unit, you’ll notice that while the margin is 784 pixels at this screen size, in the background the element will stay roughly 50% of the screen’s width away from this edge.

Moving down to tablet, the screen width drops to 768 which means 50% from the top edge is now 467px*.

So while the percentage stays the same, the relative distance in pixels changes and makes the element move closer to the docked edge.

To keep the title positioned to the bottom of the screen, you can dock the title element to the bottom.

Doing this makes the margin smaller because it’s now closer to the bottom edge.

Now, you have a margin of 93px which is just under 10%.

This means the changes in the margins across breakpoints are subtle and the element stays pretty close to the bottom border.

As you’ve seen, docking and margins go hand in hand because docking responds to the margins of the element.

So when you add an element and dock it, you’re securing in a specific direction.

If you use px*, the element will always move towards the docked point.

You can then use margins to finetune the exact positioning of the element.

Remember, margins are automatically docked and are measured with px*.

Cool, let's now move on to padding.

You can add it here to cushion content and keep everything balanced.

Padding acts as a new edge inside of the container, maintaining some “breathing room” between the content and the edge.

Like docking and margins, the default measurement for padding is px*. You can adjust padding measurements to pixels, percentages, viewport height and viewport width.

You can add padding to any container that holds different elements within it, like basic containers, stacks, flexboxes, repeaters, and more.

You can do so by going to the layers panel or selecting the element on the canvas.

You can then choose to adjust both the top and bottom padding, or the right and left padding.

You can also click on the box icon to select individual edges.

Another great feature is the alignment tool.

You can use it for both padding and margins.

If you set padding in the parent element, you’ll see the alignment tool recognize the padding as a new edge and align the content to whichever direction you choose.

Depending on what you want to create, you could also use padding or margins to get the same effect in your design.

Let’s say you want to add some extra space between the containers and the edge in this design. You can add padding to the section which creates extra internal space.

Or, you can individually set the margins for the containers and create the space.

In this case, padding is the faster option because you do not need to apply it to multiple elements.

But what if the design is different?

In this layout, it makes more sense to adjust the outer edge of the element by setting a unique margin for each one of the elements and positioning them in specific places.

You’ll notice we’ve tweaked the panel experience to make it more intuitive.

Padding is now under the layout option and margins are under the positioning section.

And there you have it.

We covered a lot of ground today about how docking, margins and padding play a key role in keeping designs responsive.

As always, we’re excited to see how you put this into practice and push your creative boundaries even further.

For more tutorials like this, check out the Wix Studio Academy.