Marge vs rembourrage
La différence entre la marge et le rembourrage est un aspect important en CSS car la marge et le rembourrage 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, ils doivent donc être utilisés de manière appropriée. Le rembourrage est l'espace entre le contenu et la bordure d'un bloc. La marge, d'autre part, est l'espace à l'extérieur de la bordure d'un bloc. La marge sépare les blocs des blocs adjacents tandis que le rembourrage sépare la bordure du contenu.
Qu'est-ce que le rembourrage ?
En CSS (Cascading Style Sheets), le padding est l'espace entre le contenu et la bordure. Il sépare le contenu d'un bloc de son bord. Le rembourrage 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 rembourrage d'un élément est spécifiée en utilisant le terme « rembourrage » dans le code CSS. Par exemple, pour ajouter un rembourrage de 25 pixels autour du contenu, le code suivant peut être utilisé.
div {
largeur: 300px;
hauteur: 300px;
remplissage: 25px;
bordure: 25px solide;
}
Si nécessaire, différentes valeurs de rembourrage 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;
padding-top: 25px;
padding-bottom: 35px;
padding-left: 5px;
padding-right: 10px;
bordure: 25px solide;
}
Qu'est-ce que la marge ?
En 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 rembourrage 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 dans CSS est spécifié à l'aide du terme "marge". Le morceau de code suivant a appliqué une marge de 25px autour du bloc div.
div {
largeur: 320px;
hauteur: 320px;
border: 5px solide;
marge: 25px;
}
Des valeurs différentes 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;
border: 5px solide;
margin-top: 25px;
marge inférieure: 35px;
margin-left: 5px;
margin-right: 10px;
}
Quelle est la différence entre marge et rembourrage ?
• Le rembourrage est l'espace entre la bordure et le contenu tandis que la marge est l'espace à l'extérieur de la bordure.
• Le rembourrage sépare le contenu d'un bloc de la bordure. La marge sépare un bloc de l'autre.
• Le rembourrage 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 alors que le rembourrage ne se chevauche pas.
Résumé:
Remplissage vs Marge
Padding 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 rembourrage inclut l'image d'arrière-plan et les couleurs d'arrière-plan appliquées autour du contenu alors que la marge ne les contient pas. Les marges des blocs adjacents peuvent parfois se chevaucher lorsque le navigateur rend la page, mais pour le rembourrage, une telle chose ne se produira pas.
