# Introduction à l'espacement

Étant donné que les téléphones mobiles et les tablettes sont fabriqués dans toutes les formes et tailles différentes, il n'est pas possible de simplement glisser et déposer des éléments sur un écran pour qu'ils soient positionnés sur un écran comme vous le feriez dans un document Google Slides, qui est réglé sur une hauteur et une largeur fixes.

Pour positionner les éléments d'une application dans Thunkable, vous devrez gérer l'espacement entre les éléments à l'aide de quelques propriétés puissantes. Vous trouverez également quelques exemples utiles dans la section des [exemples d'applications](https://docs.thunkable.com/sample-apps).

* [Espacement dans un écran, une rangée ou une colonne](#spacing-around-visible-components-within-a-screen-row-or-column)
* [Espacement autour des composants visibles dans un écran, une rangée ou une colonne](#spacing-around-visible-components-within-a-screen-row-or-column)

## Espacement dans un écran, une rangée ou une colonne

​![](https://firebasestorage.googleapis.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn66cpSYyC-nguwY8b%2FiOSviewIconScreen.png?generation=1524497158290513\&alt=media)​![](https://firebasestorage.googleapis.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn66dlMf3ocUax_oHv%2FiOSviewIconRow.png?generation=1524497194883972\&alt=media)​![](https://firebasestorage.googleapis.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn66NUXZdKuEdOggze%2FiOSviewIconCloumn.png?generation=1524497160430447\&alt=media)​

Vous pouvez espacer les éléments dans un écran, une ligne ou une colonne à l'aide de deux propriétés puissantes :`Horizontal Alignment` et`Vertical Alignment`.

`Horizontal Alignment`dans un écran, une rangée ou une colonne

![](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn6CkIz6_NVW8gSZZr%2Fspacing-%E2%9C%95-fig-1.png?alt=media)

`Vertical Alignment` dans un écran, une rangée ou une colonne

![](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn6ClEA1XUmupg0fMs%2Fspacing-%E2%9C%95-fig-2.png?alt=media)

​![](blob:https://legacy.gitbook.com/4099f622-4cd2-4244-bd4c-80afd170c746)​![](blob:https://legacy.gitbook.com/ce335df9-b7c2-498c-87a3-b8f464d8622b)​![](blob:https://legacy.gitbook.com/a7daacc3-e452-4a34-81eb-9c4b160f748c)​![](blob:https://legacy.gitbook.com/742c8dc2-6d2a-4677-9eec-a7fa9334d410)​![](blob:https://legacy.gitbook.com/c30087c7-706d-4cda-9aee-0678cca13230)​![](blob:https://legacy.gitbook.com/2a94a8e6-5259-477c-8a76-8eff9f82378a)​

## Espacement autour des composants visibles dans un écran, une rangée ou une colonne

Pour créer de l'espace autour d'un composant visible tel qu'une image, vous pouvez utiliser les attributs `margin` et `padding` qui se trouvent dans la section Advenced Propeties du composant. Dans la plupart des cas, vous pouvez ajouter une marge OU un remplissage pour créer de l'espace autour d'un élément - ils sont interchangeables et peuvent être définis en pixels et en pourcentage de la hauteur ou de la largeur. Le moyen le plus rapide de voir ce qui est le plus judicieux est de faire un [test en direct](../untitled-1#thunkable-live-a-venir) sur votre téléphone.

![](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAonNrLekbSzc3rVf_d%2F-LAooKbnBT5BcACx0Xqf%2Fspacing-%E2%9C%95-fig-3.png?alt=media\&token=67c68fcd-c42c-4ef9-a9b8-9b1f89800103)
