Marge intérieure
Marge intérieure
Marge intérieure est une leçon HTML for Kids gratuite sur CoddyKit. Ceci est la leçon 1 sur 1. 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 HTML for Kids, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML for Kids comprend 1 leçons au total.
Introduction
Bonjour,
Bienvenue dans la leçon sur les espacements internes en CSS.
Ils servent à créer un espace à l’intérieur des limites de notre élément HTML.
Tout comme pour les marges, nous pouvons ajouter un espacement interne sur les 4 côtés de l’élément.
Type pourcentage
Dans notre exemple précédent, nous avons attribué une valeur d’espacement interne statique, exprimée en px. Tout comme pour les marges, nous pouvons définir une valeur en pourcentage.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
background-color: lightblue;
padding-top:10%;
padding-right: 10%;
padding-left: 10%;
padding-bottom:10%;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box">
We assign percentage type
padding to this div element.
</div>
</body>
</html>
Raccourcir le code
Tout comme pour les marges, il est possible de définir l’espacement interne sur une seule ligne grâce à une syntaxe abrégée.
Les valeurs des espacements internes supérieur, droit, inférieur et gauche peuvent être ajoutées dans cet ordre, en les séparant par des espaces.
Consultez notre exemple de code : vous verrez qu’il est très similaire à celui des marges.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border: 1px solid black;
padding: 20px 10px 25px 10px;
background-color: powderblue;
}
</style>
</head>
<body>
<div class="box">
Lorem ipsum dolor sit amet,
consectetur
</div>
</body>
</html>Félicitations
Félicitations 🎉
Dans cette section, nous avons étudié les marges CSS.
Dans la prochaine section, nous découvrirons la couleur et l’arrière-plan.
Questions Fréquemment Posées
La leçon « Marge intérieure » est-elle gratuite ?
Oui — le texte complet de « Marge intérieure » 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 HTML for Kids, passe à CoddyKit PRO. Le cours HTML for Kids comprend 1 leçons au total.
Qu'est-ce que j'apprendrai dans « Marge intérieure » ?
Marge intérieure Tu pratiques HTML for Kids 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 HTML for Kids ?
Aucune expérience préalable n'est requise. HTML for Kids 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 1.
Combien de temps prend la leçon « Marge intérieure » ?
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 HTML for Kids ?
Oui. Chaque leçon HTML for Kids 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.