Spacing Between Grouped Controls

Use

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

The following issues are covered:

Spacing in a Tray - the offset between a tray's border and its content

What's a Correct Spacing Good for - the reasoning behind tray offsets and caesuras

Spacing between Primary and Secondary Groups - the spacing between primary and secondary groups, that is, between nested groups

Spacing between Group Controls with Header and Border - this comprises more complex controls and the groups

Spacing of Elements in Groups - the offset within groups, such as the offset between the group border and its content and the group header and its content

Arranging Groups - Alignment of groups and offsets between groups within trays

Spacing Soft Groups - Spacing rules for groupings that do not use a group control as container

The spacing rules in short:

• Offset between tray border/header and content: 5 pixels

• Spacing between primary and secondary groups: 10 pixels

• Spacing between group controls with header and border: 10 pixels

• Offset within groups, i.e. between group border and content: 5 pixels

• Spacing within groups: 10 pixels between title and content, 10 pixels between content and buttons

• Spacing between soft groups: 15 pixels horizontally, 30 pixels vertically

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