Explicaremos como funcionan los espacios dentro de nuestra aplicación y como es que funcionan las unidades.

Unidades de espaciado

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c4682673-20be-4f5f-9e11-9fcb75e1799f/ScreenShot2018-11-01at1.43.56PM.png

Una unidad es igual a 10px

Por lo tanto 2 unidades serían igual a 20px

Es libre la configuración de estas unidades mientras se usen en totales y medias(1,2,2.5,3,3.5), no parcialidades (.2,.4,.6)

Margin

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9896bbb4-f96a-470d-b1bf-3a95f26a89db/ScreenShot2018-11-01at1.42.13PM.png

Los componentes de nuestro sistema tienen un margen de una unidad de espaciado (10px), este margen afecta a todos los items a su al rededor.

Por lo tanto pueden tener un espaciado de x2 unidades (20px)

Padding

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/2e90f618-48e5-4afc-9697-3dd3f53ad7df/ScreenShot2018-11-01at1.51.19PM.png

Tendremos una unidad(10px) de cada lado cuando los componentes contengan contenido.