Spacing Between Single Controls

Use

This page describes the detailed spacing between single controls. For the spacing between grouped controls, see Spacing Between Grouped Controls .

The following controls are covered here:

• Groups of Entry Fields - this is the most often needed case for form-line applications

• Check Box Groups and Radio Button Groups - these elements are often used in groups for offering choices or options

• Mixed Form Elements in Vertical Succession - this case covers combinations of different input elements, which are arranged in one vertical column; for several columns refer to the spacing for multi-column checkbox/radio button groups

The spacing rules in short:

• Vertical spacing between single elements: 5 pixels for fields and dropdown list boxes, 8 pixels for checkboxes and radio buttons

• Horizontal spacing between multiple columns: 15 pixels

• Horizontal spacing between label and input element, width of label column: Width of widest label plus an offset of 8 to 22 pixels

• Spacing between selection element and label: 8 pixels for checkboxes and radio buttons

In this paragraph you find positive and negative examples for all these cases.