Adding Padding Around Views
Use padding to create breathing room.
Adding Padding Around Views is a free SwiftUI Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the SwiftUI Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why Views Feel Cramped
By default a SwiftUI view sits flush against its neighbors and the screen edge. Padding is the breathing room you add so content never feels squeezed.
Meet the padding Modifier
The padding modifier adds space on the outside of a view. Attach it like any other modifier and SwiftUI grows the view's footprint to make room.
Text("Hello")
.padding()The Default Amount
Calling padding() with no value uses a system default that adapts to the platform, usually around 16 points. It is a safe, consistent starting point.
Setting an Exact Amount
Pass a number to control the gap precisely. Here padding(40) adds 40 points of space on every side of the text.
Text("Spaced")
.padding(40)Padding One Edge
You can target a single edge instead of all four. This adds 30 points only on top, leaving the other sides untouched.
Text("Top gap")
.padding(.top, 30)Horizontal and Vertical
The .horizontal and .vertical edge sets are handy shortcuts. This pads the left and right sides at once with one clean call.
Text("Sides")
.padding(.horizontal, 24)Combining Edge Sets
Stack two padding calls to mix amounts per direction. Here the view gets wide horizontal margins and a smaller vertical gap.
Text("Mixed")
.padding(.horizontal, 32)
.padding(.vertical, 8)Order Matters
Modifiers apply outward in order, so where you place padding changes the result. Padding before a background pushes the color outward with the content.
Text("Hi")
.padding()
.background(.yellow)Padding Then Background
Swap the order and the difference is clear: a background applied first, then padding, leaves the color tight to the text with empty space around it.
Text("Hi")
.background(.yellow)
.padding()Padding on Containers
Padding works on stacks and any view, not just text. Wrap a VStack and pad it to push the whole group inward from the screen edges.
VStack {
Text("Line one")
Text("Line two")
}
.padding()Padding vs Margins
SwiftUI has no separate margin concept. Padding is your single tool for spacing, and chaining it gives you full control over every edge.
Quick Check
Test your grip on the padding modifier.
Recap
Nice work! You learned that padding adds breathing room outside a view, with defaults, exact amounts, specific edges, and an order that shapes backgrounds.
Frequently asked questions
Is the “Adding Padding Around Views” lesson free?
Yes — the full text of “Adding Padding Around Views” is free to read here on the web, and the SwiftUI Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the SwiftUI Academy course, upgrade to CoddyKit PRO.
What will I learn in “Adding Padding Around Views”?
Use padding to create breathing room. You practise SwiftUI Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start SwiftUI Academy?
No prior experience is required. SwiftUI Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Adding Padding Around Views” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this SwiftUI Academy lesson?
Yes. Every SwiftUI Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Adding Padding Around Views
- Sizing Views with frame
- Backgrounds & Corner Radius
- Spacer & Layout Priority