Padding

Padding

Padding properties specify the widths of the padding area of a field in the CSS box model.

The ‘padding’ shorthand property sets the padding for all four sides while the other padding properties only set their respective side.

padding-top

Value	1 Dimension
Initial	0
Applies To	all fields and managers
Percentages	refer to the available width of the field

Sets the top padding of a field.

style { 
	padding-top: 10px; 	/* the top padding is set to 10 pixels */
}

padding-right

Value	1 Dimension
Initial	0
Applies To	all fields and managers
Percentages	refer to the available width of the field

Sets the left padding of a field.

style {
	padding-right: 10px;	 /* the right padding is set to 10 pixels */
}

padding-bottom

Value	1 Dimension
Initial	0
Applies To	all fields and managers
Percentages	refer to the available width of the field

Sets the bottom padding of a field.

style {
	padding-bottom: 10px;	 /* the bottom padding is set to 10 pixels */
}

padding-left

Value	1 Dimension
Initial	0
Applies To	all fields and managers
Percentages	refer to the available width of the field

Sets the left padding of a field.

style {
	padding-left: 10px;	 /* the left padding is set to 10 pixels */
}

padding

Value	1,2,3 or 4 Dimensions
Initial	0
Applies To	all fields and managers
Percentages	refer to the available width of the field

The ‘padding’ property is a shorthand property for setting ‘padding-top’, ‘padding-right’, ‘padding-bottom’, and ‘padding-left’.

If there is only one component value, it applies to all sides.

style {
	padding: 10px;	/* all paddings are set to 10 pixels */
} 

If there are two values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second.

style { 
	padding: 1% 2%; /* top / bottom padding : 1 %, left / right padding : 2 % */
} 

If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third.

style { 
	padding: 1cm 2cm 3cm; 
	/* top padding : 1 cm, left / right padding : 2 cm, bottom padding : 3 cm*/
} 

If there are four values, they apply to the top, right, bottom, and left, respectively.

style {
	padding: 1pt 2pt 3pt 4pt; 
	/* top padding: 1pt, right padding: 2pt, bottom padding: 3 pt, left padding: 4pt */
}