Marge
Marge
Marge 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
La marge est l’un des sujets les plus importants en CSS.
Les marges sont les espaces que nous créons autour des limites d’un élément.
Explication des côtés de la marge
Quel que soit le type d’élément, lors de la création d’une marge, nous ne devons pas la considérer comme une valeur à 4 côtés (haut, droite, bas et gauche).
<style>
.box{
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
width:100px;
height:100px;
background-color: powderblue;
}
</style>
<div class="box">Box with margin</div>
<div class="box">Box with margin</div>Avertissement
Tout comme nous pouvons attribuer une valeur précise à la marge, nous pouvons également lui attribuer une valeur en pourcentage.
Avertissement
Tout comme nous pouvons attribuer une valeur précise à la marge, nous pouvons également lui attribuer une valeur en pourcentage.
Raccourci pour les marges
Dans notre exemple précédent, nous devions écrire 4 lignes de code pour définir la marge de tous les côtés d’une boîte.
CSS nous fournit une syntaxe abrégée pour écrire un code plus court.
Après avoir défini la propriété de marge, nous pouvons attribuer nos valeurs de marge en les séparant par des espaces, dans l’ordre suivant : haut, droite, bas et gauche (c’est-à-dire dans le sens des aiguilles d’une montre).
<style>
.box {
margin: 10px 10px 10px 10px;
background-color: powderblue;
}
</style>
<div class="box">Box with margin</div>
Avertissement concernant la marge négative
Les marges peuvent prendre une valeur négative. Les espacements internes que nous verrons dans la prochaine leçon ne peuvent pas avoir de valeur négative.
marge automatique
Nous utiliserons la valeur auto de la propriété de marge pour centrer nos éléments horizontalement. Quelle que soit la résolution de l’écran, l’élément sera centré horizontalement.
Supposons que l’écran mesure 1200px et que notre élément mesure 400px. Notre élément sera centré, avec des espaces de 400px à gauche et à droite.
<style>
.box {
width:200px;
margin: auto;
background-color: powderblue;
}
</style>
<div class="box">
This element will be horizontally
centered because
it has margin: auto;
</div>Félicitations
Félicitations 🎉
Dans cette section, nous avons étudié les marges CSS.
Dans la prochaine section, nous découvrirons les espacements internes CSS.
Questions Fréquemment Posées
La leçon « Marge » est-elle gratuite ?
Oui — le texte complet de « Marge » 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 » ?
Marge 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 » ?
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.