# 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bamtech.gitbook.io/ux-ui-standards/ui-standards/margins.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.