Margin
Margin
- Margin represents the space between boxes
.thing {
/* margin can be applied to individual
sides of a box using margin-top, margin-bottom,
margin-left or margin-right */
/* style below applies 20px to left side of box */
margin-left: 20px;
}
.other-thing {
/* style below applies 10px to all four sides of box */
margin: 10px;
}
.gizmo {
/* when 4 values are provided, then values
are applied in a clockwork manner:
margin: [top] [right] [bottom] [left]; */
/* style below applies 4px to top, 10px to right,
6px to bottom & 10px to left */
margin: 4px 10px 6px 10px;
}
.other-gizmo {
/* when 2 values are represented as follows
margin: [top & bottom], [left, right]; */
/* style below applies 4px to top & bottom and 10px to right
& left */
margin: 4px 10px;
}
JS Bin on jsbin.com