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