# Intro to Spacing

Since mobile phones and tablets are made in all different shapes and sizes, it's not possible to simply drag and drop elements on a screen so that they are positioned on a screen like you would in a Google Slides document, which is set to a fixed height and width.

To position elements of an app in Thunkable, you'll have to manage the spacing between elements with a few powerful properties. You will also find some helpful examples in the [sample apps](https://docs.thunkable.com/snap-to-place/sample-apps) section.

* [Spacing within a Screen, Row or Column](#spacing-within-a-screen-row-or-column)
* [Spacing around Visible Components within a Screen, Row or Column](#spacing-around-visible-components-within-a-screen-row-or-column)

## Spacing within a Screen, Row or Column

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn66cpSYyC-nguwY8b%2FiOSviewIconScreen.png?generation=1524497158290513\&alt=media)![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn66dlMf3ocUax_oHv%2FiOSviewIconRow.png?generation=1524497194883972\&alt=media)![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn66NUXZdKuEdOggze%2FiOSviewIconCloumn.png?generation=1524497160430447\&alt=media)

You can space elements within a Screen, Row or Column using two powerful properties:`Horizontal Alignment` and `Vertical Alignment`.

`Horizontal Alignment` in a Screen, Row or Column

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn6CkIz6_NVW8gSZZr%2Fspacing-%E2%9C%95-fig-1.png?generation=1524497178810013\&alt=media)

`Vertical Alignment` in a Screen, Row or Column

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn6ClEA1XUmupg0fMs%2Fspacing-%E2%9C%95-fig-2.png?generation=1524497178898825\&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)

## Spacing around Visible Components within a Screen, Row or Column

To create space around a visible component like an Image, you can use the `margin` and `padding` that are found in the Advanced section of the component properties. In most cases, you can add a margin OR padding to create space around an element -- they are interchangeable and can be set both in pixels and percent of the height or width. The fastest way to see what makes the most sense is to [live test](https://docs.thunkable.com/snap-to-place/get-started/live-test) on your phone.

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