Ajouter des marges intérieures autour des vues
Utilisez les marges intérieures pour créer de l’espace autour du contenu.
Ajouter des marges intérieures autour des vues est une leçon SwiftUI Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage SwiftUI Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours SwiftUI Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
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.
Questions Fréquemment Posées
La leçon « Ajouter des marges intérieures autour des vues » est-elle gratuite ?
Oui — le texte complet de « Ajouter des marges intérieures autour des vues » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours SwiftUI Academy, passe à CoddyKit PRO. Le cours SwiftUI Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Ajouter des marges intérieures autour des vues » ?
Utilisez les marges intérieures pour créer de l’espace autour du contenu. Tu pratiques SwiftUI Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer SwiftUI Academy ?
Aucune expérience préalable n'est requise. SwiftUI Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Ajouter des marges intérieures autour des vues » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon SwiftUI Academy ?
Oui. Chaque leçon SwiftUI Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Ajouter des marges intérieures autour des vues
- Dimensionner les vues avec frame
- Arrière-plans et rayon des angles
- Spacer et priorité de disposition