You are here: Designer > Features > Styling and formatting > How to position elements
 

How to position elements

To position elements in relation to each other in a template, wrap those elements in a Table or Box (see Table and Boxes) and/or use the Spacing property of the elements. The Spacing property can also be used to indent elements or create a hanging paragraph or image; see Spacing. Guides help to align elements as well; see below.

Where to use Tables and Boxes

Tables, Positioned Boxes and Inline Boxes can help position elements in relation to other elements. It depends on the context which element is best to use.

In the Email context, Tables are the most reliable way to position text and images; see Designing an Email template and Table.

In the Web context, Inline Boxes are the preferred way to position elements; see Boxes. Tables should only be used to display data in a tabular format, not to position text and images. Tables used in web pages to position elements (and often, Positioned Boxes) make those pages less accessible to users with disabilities and to viewers using smaller devices.

In the Print context, Tables can be used to position elements, as well as both types of Boxes; see Table and Boxes.

Spacing

Boxes, tables, paragraphs and many other elements have a margin and padding.
The margin is the white space around an element, outside the border. It is used to position an element in relation to the other elements, by putting more space between the element and its surrounding elements.
The padding is the space between an element's content and its border. It is used to position the content of the element inside the border.

To learn how to set an element's spacing properties, see Spacing.

Use a negative left margin to create a hanging paragraph or image.

Guides

Guides are horizontal and vertical lines used to help in designing templates. Positioned Boxes (and any other objects that have their position set to absolute) will snap to guides when moved within a few pixels of them.

To add a guide, press the Insert Horizontal Guide or Insert Vertical Guide buttons on the Toolbar.

To move a guide, click and drag it to a new location. Double-clicking the guide brings up its Edit dialog where its exact position can be adjusted.

To delete a guide, double-click on it and press the Delete button.