LESSON 05

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 edge. You can override this and manually set your docking from the Inspector panel.

Adding margins.

Use margins to maintain a set distance between an element and the edges of the container it’s docked to. Margins can be set 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.

​TRY IT YOURSELF

Exercise on docking & margins.

Open Academy X from desktop to complete this exercise.

Start these exercises on the desktop breakpoint (1001px & Up).

01

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.

02

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.

03

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.

04

Drag & dock. Drag the image to the right side of the screen. It will automatically dock for best results. Tip! Elements in Editor X can be docked to any side.

05

Customize docking. ​Now, position the image exactly 10% from the right, and 30px from the bottom. To change the docking, click the
dots in the Docking control. 

06

Dock to center. Click the dot in the middle. Click Horizontal and Vertical to dock the image to center. Now, set the margin values to 0px. Use the drag handles to resize the canvas and see how it looks.

Watch related videos.