Spacing

Definitions

Margin : External spacing between an element and the ones on the same level

Padding : Internal spacing between element and its child elements

I am using spacing correctly if :

• the spacing used helps me understand the hierarchy and grouping of elements on the page

• developers can place elements on the page without input from a designer

• designers can place elements on the page in less than 30 seconds

Standard : Use a spacing grid

How to define a grid

• Define a basic spacing value (5pt, 8pt ...)

• Use only multiples of that value to place elements on the page

Pro-tip : Material Design uses an 8pt-grid

Using a grid brings consistency and ease of mind

• It reduces the amount of time needed to position elements by reducing choice

• It ensures a visual harmony of the positioning and sizing of elements by using only multiples of a basic value

For elements with fixed width or height, fix that dimension using multiples of the spacing value as well, for maximum consistency

Good practices

Add your grid values on you Styleguide

• Add your grid basic value and some commonly used spacing dimensions on your styleguide

• Define elements by margin instead of by size.

Sketch tips

• Décaler les éléments de 10pts dans une direction : shift + flèche

• Mesurer la marge entre deux éléments : sélectionner un élément + alt sur l’autre élément

• On peut faire des calculs simples (+, -, *, /) dans l’inspecteur de Sketch

Helpful articles