Marge et Remplissage Simplifiés
Glissez pour afficher le menu
Vous savez que chaque élément possède un contenu, un remplissage (padding), une bordure et une marge. Voyons comment contrôler l'espacement à l'aide de ces propriétés.
Padding
Le padding crée un espace à l'intérieur de l'élément, entre le contenu et la bordure.
.box {
padding: 20px;
}
Cela applique 20px de padding sur les quatre côtés.
Raccourci pour le padding
Le padding peut être écrit en utilisant une syntaxe abrégée.
L'ordre des valeurs est toujours : haut → droite → bas → gauche
padding: 20px; /* all sides */
padding: 10px 20px; /* top/bottom | left/right */
padding: 10px 20px 5px; /* top | left/right | bottom */
padding: 10px 15px 20px 25px; /* top | right | bottom | left */
Propriétés de remplissage individuelles
Vous pouvez également contrôler chaque côté séparément :
padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;
Marge
La marge crée un espace à l'extérieur de l'élément, entre celui-ci et les autres éléments.
.box {
margin: 20px;
}
Raccourci pour la marge
La marge suit les mêmes règles de raccourci que le remplissage :
margin: 20px; /* all sides */
margin: 10px 20px; /* top/bottom | left/right */
margin: 10px 20px 5px; /* top | left/right | bottom */
margin: 10px 15px 20px 25px; /* top | right | bottom | left */
Propriétés de marge individuelles
Peuvent également être définies individuellement :
margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;
Bordure
La bordure se situe entre le remplissage (padding) et la marge.
Raccourci de base :
border: 4px solid brown;
Cela définit : largeur, style, couleur.
Les styles de bordure courants incluent solid, dotted, dashed et double.
Vous pouvez également contrôler chaque côté individuellement si nécessaire :
border-top: 2px solid black;
Considérons l'exemple suivant et identifions les styles de bordure possibles :
index.html
styles.css
Sortie
Padding :
- Ajoute de l'espace à l'intérieur de l'élément ;
- Agrandit la zone d'arrière-plan.
Marge :
- Ajoute de l'espace à l'extérieur de l'élément ;
- N'affecte pas l'arrière-plan de l'élément.
1. Quel côté reçoit 40px dans la déclaration suivante ?
2. Quelle propriété ajoute de l'espace à l'intérieur d'un élément, entre son contenu et sa bordure ?
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Marge et Remplissage Simplifiés
Vous savez que chaque élément possède un contenu, un remplissage (padding), une bordure et une marge. Voyons comment contrôler l'espacement à l'aide de ces propriétés.
Padding
Le padding crée un espace à l'intérieur de l'élément, entre le contenu et la bordure.
.box {
padding: 20px;
}
Cela applique 20px de padding sur les quatre côtés.
Raccourci pour le padding
Le padding peut être écrit en utilisant une syntaxe abrégée.
L'ordre des valeurs est toujours : haut → droite → bas → gauche
padding: 20px; /* all sides */
padding: 10px 20px; /* top/bottom | left/right */
padding: 10px 20px 5px; /* top | left/right | bottom */
padding: 10px 15px 20px 25px; /* top | right | bottom | left */
Propriétés de remplissage individuelles
Vous pouvez également contrôler chaque côté séparément :
padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;
Marge
La marge crée un espace à l'extérieur de l'élément, entre celui-ci et les autres éléments.
.box {
margin: 20px;
}
Raccourci pour la marge
La marge suit les mêmes règles de raccourci que le remplissage :
margin: 20px; /* all sides */
margin: 10px 20px; /* top/bottom | left/right */
margin: 10px 20px 5px; /* top | left/right | bottom */
margin: 10px 15px 20px 25px; /* top | right | bottom | left */
Propriétés de marge individuelles
Peuvent également être définies individuellement :
margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;
Bordure
La bordure se situe entre le remplissage (padding) et la marge.
Raccourci de base :
border: 4px solid brown;
Cela définit : largeur, style, couleur.
Les styles de bordure courants incluent solid, dotted, dashed et double.
Vous pouvez également contrôler chaque côté individuellement si nécessaire :
border-top: 2px solid black;
Considérons l'exemple suivant et identifions les styles de bordure possibles :
index.html
styles.css
Sortie
Padding :
- Ajoute de l'espace à l'intérieur de l'élément ;
- Agrandit la zone d'arrière-plan.
Marge :
- Ajoute de l'espace à l'extérieur de l'élément ;
- N'affecte pas l'arrière-plan de l'élément.
Merci pour vos commentaires !
