-
Notifications
You must be signed in to change notification settings - Fork 0
Margin
Margin properties specify the widths of the margin area of a field in the CSS box model.
The ‘margin’ shorthand property sets the margin for all four sides while the other margin properties only set their respective side.
| Value | 1 Dimension |
| Initial | 0 |
| Applies To | all fields and managers |
| Percentages | refer to the available width of the field |
Sets the top margin of a field.
style {
margin-top: 10px; /* the top margin is set to 10 pixels */
}
| Value | 1 Dimension |
| Initial | 0 |
| Applies To | all fields and managers |
| Percentages | refer to the available width of the field |
Sets the left margin of a field.
style {
margin-right: 10px; /* the right margin is set to 10 pixels */
}
| Value | 1 Dimension |
| Initial | 0 |
| Applies To | all fields and managers |
| Percentages | refer to the available width of the field |
Sets the bottom margin of a field.
style {
margin-bottom: 10px; /* the bottom margin is set to 10 pixels */
}
| Value | 1 Dimension |
| Initial | 0 |
| Applies To | all fields and managers |
| Percentages | refer to the available width of the field |
Sets the left margin of a field.
style {
margin-left: 10px; /* the left margin is set to 10 pixels */
}
| 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 ‘margin’ property is a shorthand property for setting ‘margin-top’, ‘margin-right’, ‘margin-bottom’, and ‘margin-left’.
If there is only one component value, it applies to all sides.
style {
margin: 10px; /* all margins are set to 10 pixels */
}
If there are two values, the top and bottom margins are set to the first value and the right and left margins are set to the second.
style {
margin: 1% 2%; /* top / bottom margin : 1 %, left / right margin : 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 {
margin: 1cm 2cm 3cm;
/* top margin : 1 cm, left / right margin : 2 cm, bottom margin : 3 cm*/
}
If there are four values, they apply to the top, right, bottom, and left, respectively.
style {
margin: 1pt 2pt 3pt 4pt;
/* top margin: 1pt, right margin: 2pt, bottom margin: 3 pt, left margin: 4pt */
}
The margins of fields in a manager collapse. This means that adjoining margins
of two fields can combine to form a single margin. For example :
Two fields are added to a VerticalFieldManager.
The first field has a bottom margin of 10 pixels.
The second field next to the first field has a top margin of 20 pixels.
The vertical margin between these given fields will result in a total of 20 pixels as the
larger top margin of the second field dominates the smaller bottom margin of the first field.