> For the complete documentation index, see [llms.txt](https://bamtech.gitbook.io/ux-ui-standards/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bamtech.gitbook.io/ux-ui-standards/ui-standards/margins.md).

# Spacing

## Definitions

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

**Padding :** Internal spacing between element and its child elements

![](/files/-L5o3BV9vnqT4EIT5R7B)

## 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

{% hint style="success" %}

* Define a basic spacing value (5pt, 8pt ...)
* Use only multiples of that value to place elements on the page
  {% endhint %}

{% hint style="info" %}
**Pro-tip :** Material Design uses an 8pt-grid
{% endhint %}

### 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

{% hint style="info" %}
For elements with fixed width or height, fix that dimension using multiples of the spacing value as well, for maximum consistency
{% endhint %}

### Good practices

![Add your grid values on you Styleguide](/files/-L5oAkhdIOrOXE-OR8Zz)

* 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