How to add space around and inside elements

In TeleportHQ, margin is the space outside an element (between it and its neighbours), and padding is the space inside it (between its edge and its content). Select the element, then type values in the Margin or Padding section of the right panel. You can also drag the shaded margin and padding handles directly on the canvas.

Before you start#

• To space out several items evenly inside a row or column, use Gap instead of margins. See How to align and space items in a row or column.
• Spacing applies to the screen size you are editing and all smaller ones.

Steps#

1. On the canvas, click the element. For example, click a section.
2. In the right panel → Visual tab, find the Margin section (space outside) or the Padding section (space inside). They come right after Inner Layout.
3. Click + in the section's title row, or click the title itself, to open it. A box with four inputs appears: top, right, bottom and left.
4. Type a value in the side you want, for example 64px in the top and bottom boxes. You can also pick a saved spacing value from the list.
5. To set several sides at once, click the link toggles between the inputs. They link the top and bottom sides, the left and right sides, or, with the lock in the middle, all four sides.

Drag spacing on the canvas#

TeleportHQ shows margin and padding directly on the selected element, as shaded areas with small handles.

1. Select one element. Margin shows as shading outside the element, padding as shading inside.
2. Drag a handle to change that side. A label shows the value as you drag.
3. Release. If the value is close to a saved spacing value, it snaps to it and the label shows the saved value's name and size.
4. Drag a handle back to 0 to remove that value.

The shading and handles are on by default. To turn them off or on, press Ctrl+Shift+H (Cmd+Shift+H on Mac), or:

1. At the bottom of the left sidebar, click the Project settings cog.
2. Under Editor, click Preferences, then View.
3. Under Selection, turn Highlight element margin and padding off or on.

The same switch is in the Project Menu (the TeleportHQ logo at the top left): View → Selection → Highlight element margin and padding.

Remove spacing#

1. Select the element.
2. In the Margin or Padding section's title row, click −.

This removes all four values at the current screen size. If the spacing comes only from a CSS class or another default, − sets the four sides to 0px at this screen size instead.

Check that it worked#

The space changes on the canvas right away. Switch screen sizes above the canvas to check that the spacing still works on mobile.

Troubleshooting#

I can't see the margin and padding handles Handles only show when one element is selected, you're not editing text, and comments are hidden. They don't show for the page itself, for components placed on a page, or for elements inside them. Check that Highlight element margin and padding is on.

The + or − button in the section is greyed out A larger screen size already has spacing values for this element. Type values in the boxes to override them at this size, or switch to the larger screen size to change them there.

My margins disappeared Margins are set aside when you change Position to anything other than Auto. They are also removed when you move an element into a row or column by dragging. Set Position back to Auto to restore set-aside margins. See How to position elements.

Double-clicking a padding handle started editing the text Double-clicking a padding handle on a text element opens text editing. Click outside the text to stop editing, then drag the handle without double-clicking.

Good to know#

• Dragging a handle can't create negative spacing.
• Saved spacing values keep your site consistent. See How to create reusable sizes, spacing and corner radius.
• The page itself has no Margin section.