Note:
The values you find in here for spacing and layouting can not be used with the grid layout control currently in usage, and are not meant to be used with it. The grid layout control as the current SAP layouting tool does only support very simple design possibilities. For information how to use the grid layout control see: Grid Layout / Usage and Types.
A new form layout control is being developed and will be available latest with the 6.0 version of the portal. The pages about spacing you find under the first point "1. General" have been written to support the development of the form layout tool, and to meet the necessities of future design needs in advance.

Spacing Between Single Controls

Groups of Entry Fields | Check Box Groups | Radio Button Groups | Mixed Form Elements in Vertical Succession

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

Below you find positive and negative examples for all these cases.

Top

Groups of Entry Fields

	Leave an offset of five pixels between entry fields.
Figure 1a: Offset between fields Top
	At SAP it is common style to have fields that are left aligned with ragged edges on the right side.
Figure 1b: Fields have ragged edges Top
	Justified fields are not necessarily wrong. However, it is hard to figure out why one needs a birth date field with more than eight characters.
Figure 2: Example of justified fields
Figure 3a: Offset between label and fields	As one can never predict the length of a field label on the one side, and how many fields will be necessary in one scenario in succession on the other, it is hardly possible to give a standard offset between label and entry field.
As a rule of thumb one can say: In one row of entry fields that follow each other in succession consider the offset between the widest label and its entry field. If possible, try to avoid an offset smaller then 8 pixels, which is one character, and wider then 22 pixels, which is three characters. In the scenario on the left the offset between widest label and its corresponding entry field is 8 pixels.
	By restricting the space next to the widest label to a maximum size we ensure that the offset between the smallest label and its corresponding entry field is not too large and the user can still adjust label and entry field to each other.
Figure 3b: Offset between label and fields
	Here you can still adjust the largest label and its corresponding field but it becomes almost hard work adjusting "E-mail" to its input field.
Figure 3c: Example of too large offset between label and fields
	Though all offsets seem to look correct the missing offset between "Reenter Your Password" and its entry field makes the whole interface look ugly.
Figure 3d: Example of too small offset between label and fields

Top

Check Box Groups

	Leave an offset of eight pixels between check boxes and their corresponding label.
Figure 4a: Offset between check boxes and their labels Top
	Leave an offset of eight pixels between rows of check boxes.
Figure 4b: Offset between rows of check boxes. Top
	Leave an offset of 15 pixels between columns of check boxes.
Figure 4c: Offset between groups of check boxes

Top

Radio Button Groups

	Leave an offset of eight pixels between radio buttons and their corresponding label.
Figure 5a: Offset between radio buttons and their labels Top
	Leave an offset of eight pixels between rows of radio buttons.
Figure 5b: Offset between rows of radio buttons Top
	Leave an offset of 15 pixels between columns of radio buttons.
Figure 5c: Offset between radio button groups

Top

Mixed Form Elements in Vertical Succession

	Between field like form elements in a vertical succession is always an offset of 5 pixels.
Figure 6a: Offset around mixed form elements in vertical succession Top
	Above and beneath button like form elements is always an offset of 8 pixels regardless of the following or previous element.
Figure 6b: Offset around mixed form elements in vertical succession Top
	Leave an offset of 15 pixels between columns of form elements.
Figure 6c: Offset between horizontal groups of mixed form elements in vertical succession Top