Marge vs rembourrage
La différence entre la marge et le remplissage est un aspect important en CSS car la marge et le remplissage sont deux concepts importants utilisés en CSS pour fournir un espacement entre différents éléments. Le rembourrage et les marges ne sont pas interchangeables et ont des objectifs différents et doivent donc être utilisés de manière appropriée. Le remplissage est l'espace entre le contenu et la bordure d'un bloc. La marge, en revanche, est l'espace à l'extérieur de la bordure d'un bloc. La marge sépare les blocs des blocs adjacents tandis que le remplissage sépare la bordure du contenu.
Qu'est-ce que le rembourrage?
Dans CSS (Cascading Style Sheets), le remplissage est l'espace conservé entre le contenu et la bordure. Il sépare le contenu d'un bloc de son bord. Le remplissage est transparent et inclut également l'image d'arrière-plan ou la couleur d'arrière-plan de l'élément. La quantité de remplissage d'un élément est spécifiée en utilisant le terme «remplissage» dans le code CSS. Par exemple, pour ajouter un remplissage de 25 px autour du contenu, le code suivant peut être utilisé.
div {
largeur: 300px;
hauteur: 300px;
rembourrage: 25px;
bordure: solide de 25 pixels;
}
Si nécessaire, différentes valeurs de remplissage peuvent également être spécifiées séparément pour la gauche, la droite, le haut et le bas. Le morceau de code suivant spécifie différentes valeurs de remplissage pour chaque côté.
div {
largeur: 300px;
hauteur: 300px;
rembourrage haut: 25px;
rembourrage en bas: 35px;
padding-left: 5px;
padding-right: 10px;
bordure: solide de 25 pixels;
}
Qu'est-ce que la marge?
Dans CSS (feuilles de style en cascade), la marge est l'espace à l'extérieur de la bordure. Il sépare un bloc des autres blocs. La marge est également transparente, mais une grande différence avec le remplissage est que la marge n'inclut pas les images d'arrière-plan ou les couleurs d'arrière-plan appliquées à l'élément. Le montant de la marge en CSS est spécifié à l'aide du terme «marge». Le morceau de code suivant appliquait une marge de 25 pixels autour du bloc div.
div {
largeur: 320px;
hauteur: 320px;
bordure: solide 5px;
marge: 25px;
}
Différentes valeurs peuvent également être spécifiées pour différents côtés du bloc. Le morceau de code suivant applique différentes valeurs de marge pour chaque côté.
div {
largeur: 320px;
hauteur: 320px;
bordure: solide 5px;
marge supérieure: 25px;
marge inférieure: 35px;
marge gauche: 5px;
marge droite: 10px;
}
Quelle est la différence entre Margin et Padding?
• Le remplissage est l'espace entre la bordure et le contenu tandis que la marge est l'espace à l'extérieur de la bordure.
• Le remplissage sépare le contenu d'un bloc de la bordure. La marge sépare un bloc de l'autre.
• Le remplissage se compose des images d'arrière-plan et des couleurs d'arrière-plan appliquées au contenu alors que la marge n'en contient pas.
• Les marges des blocs adjacents peuvent se chevaucher tandis que le remplissage ne se chevauche pas.
Résumé:
Rembourrage vs marge
Le remplissage est l'espace à l'intérieur de la bordure d'un bloc qui sépare la bordure du contenu. La marge est l'espacement à l'extérieur de la bordure qui sépare un bloc des blocs adjacents. Une autre différence est que le remplissage inclut l'image d'arrière-plan et les couleurs d'arrière-plan appliquées autour du contenu tandis que la marge ne les contient pas. Les marges des blocs adjacents peuvent parfois se chevaucher lorsque le navigateur affiche la page, mais pour le remplissage, une telle chose ne se produira pas.
Images de courtoisie:
