> 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

![](https://2839192808-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L3Ckj9RuJ2qwWPoNJTG%2F-L5o0mJV-5uIElE1mhWH%2F-L5o3BV9vnqT4EIT5R7B%2Fimage.png?alt=media\&token=2ab5ae24-e38f-4fe2-bf95-4c9f5ded67a6)

## 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](https://2839192808-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L3Ckj9RuJ2qwWPoNJTG%2F-L5oAGbtLLLUcHc_huTZ%2F-L5oAkhdIOrOXE-OR8Zz%2Fimage.png?alt=media\&token=46c9b58c-56f9-4010-84e4-1f8b7ab234fb)

* 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