Docking & margins

Control the positioning of elements at every viewport size.

Docking elements

Editor X has a smart docking system. When you drag an element into a container, it automatically docks to the closest edges. You can override this and manually set your docking from the Inspector panel.

On the canvas, the Inspector panel is open. An element is shown being docked to the right and bottom.

Adding margins

Use margins to maintain a set distance between an element and the edges of the container it’s docked to. From the Inspector panel, under Margins, choose your desired value in pixels (px) or percent (%). You can also add margins to the sides of an element that isn’t docked. These margins act like a buffer between the element and the container or gridlines around it.

The Inspector panel is open and specific margins are being set for the element that is being docked.

Follow these steps in the editor

Open exercise template →

Resize the canvas. Drag the handles at the sides of the canvas to see how the image stays docked to the left on every screen size.
Change a margin value. Select the image to open the Inspector panel on the right. The left margin is set to 100px. This means it's positioned 100px to the left. Change the value to 250px and see what happens.
Set the margin unit. Set the image margins in %. Use the drag handles to resize and watch the image respond differently on every screen size.
Drag & dock. Drag the image to the right side of the screen. It will automatically dock for best results. Remember, elements on Editor X can be docked to any side.
Customize docking. Now, from the Inspector panel using the docking and margin controls, position the image exactly 10% from the right, and 30px from the bottom.
Dock to center. Click the dot in the center of your docking controls, so the image is docked to the center. Now, set the margin values to 0px. Use the drag handles to resize the canvas and see how it looks.