📐
Thunkable Docs
Build an AppDrag and Drop DocsSnap to Place Docs
Snap to Place
Snap to Place
  • 👋Welcome to Thunkable Docs
  • 👶Getting Started
    • Signing In
    • Your Thunkable Projects Page
    • Tutorials
    • Live Test your App
  • 🆕Create New Project
    • Project Settings
    • Project Assets and Sizes
  • Thunkable Sample Projects
  • Public Gallery of Projects
  • 🛠️ Components
  • 🔘User Interface
  • Button
  • Label
  • Text Input
  • List Viewer
  • Web Viewer
  • Switch
  • Slider
  • Alert
  • Loading Icon
  • Date Input
  • Time Input
  • PDF Reader
  • Rating
  • 📊Data Viewers
  • Data Viewer List
  • Data Viewer Grid
  • Custom Data Viewer Layout
  • Data Sources
  • 📐Layout
  • Top Tab Navigator
  • Bottom Tab Navigator
  • Stack Navigator
  • Drawer Navigator
  • Screen
  • Row
  • Column
  • 📷 Image
  • Image
  • Photo Library
  • Camera
  • Barcode Scanner
  • Image Recognizer
  • Animation by Lottie
  • Video
  • Video Recorder
  • 🗄️ Data
  • Local Storage
  • Local DB
  • Realtime DB by Firebase
  • Airtable
  • Media DB by Cloudinary
  • File Picker
  • Web API
  • 🌍Location
  • Maps by Google and Apple
  • Location Sensor
  • 💲Monetization
  • Ads by AdMob
  • In-App Purchase
  • 🌐Sensors
  • Gyroscope
  • Magnetometer
  • Accelerometer
  • Timer
  • Bluetooth Low Energy
  • 🔊Voice
  • Sound
  • Text to Speech
  • Speech Recognizer
  • Translator
  • Audio Recorder
  • 🤝Social
  • Share
  • Email Sign In by Firebase
  • Push Notifications by One Signal
  • 🎮Gaming
  • Canvas
  • Sprites
  • Sprite Gallery
  • Canvas Label
  • 🤖Gaming Blocks🎮
  • Events
  • Motion
  • Looks
  • Direction
  • Sensing
  • Add & Remove
  • Stage
  • Canvas Label
  • 🤖Blocks
  • Control
  • Logic
  • Math
  • Text
  • Lists
  • Color
  • Objects
  • Device
  • Variables
  • Functions
  • "Any Component" Blocks
  • 🖥️ App Services & Emulators
  • 🔒App Data Privacy
  • ➕Make Copy
  • 📥Download
  • 📤Share
  • 📱Publish
  • Publish to App Store (iOS)
    • TestFlight Overview
      • TestFlight in Depth
  • Publish to Play Store (Android) with AAB
  • Publish as a Web App
  • Generate Screenshots
  • 🔎Troubleshooting
    • Login Issues
    • FAQs
  • 📏Intro to Spacing
  • 🖼️ Intro to Sizing
  • 🔤Fonts
  • 💾Managing Storage
  • 📝Bugs and Product Feedback
  • Snap to Place Hour of Code Videos
Powered by GitBook
On this page
  • Spacing within a Screen, Row or Column
  • Spacing around Visible Components within a Screen, Row or Column

Was this helpful?

Export as PDF

Intro to Spacing

PreviousFAQsNext🖼️ Intro to Sizing

Last updated 2 years ago

Was this helpful?

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 section.

Spacing within a Screen, Row or Column

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

Vertical Alignment in a Screen, Row or Column

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

📏
live test
sample apps
Spacing within a Screen, Row or Column
Spacing around Visible Components within a Screen, Row or Column