Margins and Paddings

Usage
Code

You should use a multiple of the magic unit as margins and paddings

You should remove border sizes from the vertical paddings values


Removing border sizes from vertical paddings

For exemple, take a button. If your button have a 2x magic-unit height (32px) you have :

  • 1px borders
  • 1.5x magic-unit line-height
  • your padding top and bottom would be 0.25x magic-unit minus 1px