Intro to Spacing

Last updated last month

Short guide to spacing elements for different screen sizes and resolutions

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 design templates and sample apps.

Spacing within a Screen, Row or Column

You can space elements within a Screen, Row or Column using two powerful properties Justification and Alignment.

Justification in a Screen and Row; In a column, Justification and Alignment is reversed

Alignment in a Screen and Row

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 on your phone.