Différence entre la marge et le rembourrage

Marge vs rembourrage
 

La différence entre la marge et le remplissage est un aspect important de CSS comme marge et padding sont deux concepts importants utilisés en CSS pour fournir un espacement entre différents éléments. Les rembourrages 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 remplissage est l'espace entre le contenu et la bordure d'un bloc. La marge, en revanche, est l'espace situé à l'extérieur du 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?

En CSS (Feuilles de style en cascade), le padding est l’espace gardé entre le contenu et la bordure. Il sépare le contenu d'un bloc de son bord. Le rembourrage est transparent et comprend é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 «padding» 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;
rembourrage: 25px;
frontière: 25px solide;

Si nécessaire, différentes valeurs de remplissage peuvent être spécifiées séparément pour gauche, droite, haut et bas. Le code suivant spécifie différentes valeurs de remplissage pour chaque côté.

div
largeur: 300px;
hauteur: 300px;
rembourrage en haut: 25px;
rembourrage en bas: 35px;
padding-left: 5px;
padding-right: 10px;
frontière: 25px solide;

Quelle est la marge?

En CSS (Cascading Style Sheets), la marge est l’espace situé en dehors de la bordure. Il sépare un bloc des autres blocs. La marge est également transparente, mais une grande différence avec le remplissage réside dans le fait qu'elle n'inclut pas d'images d'arrière-plan ni de couleurs d'arrière-plan appliquées à l'élément. Le montant de la marge en CSS est spécifié en utilisant le terme «marge». Le code suivant appliquait une marge de 25 pixels autour du bloc div..

div
largeur: 320px;
hauteur: 320px;
bordure: 5px solide;
marge: 25px;

Différentes valeurs peuvent également être spécifiées pour différents côtés du bloc. Le code suivant applique différentes valeurs de marge pour chaque côté.

div
largeur: 320px;
hauteur: 320px;
bordure: 5px solide;
marge supérieure: 25 px;
marge inférieure: 35 px;
marge gauche: 5px;
marge droite: 10px;

Quelle est la difference entre Margin et Padding?

• Le padding est l’espace entre la bordure et le contenu, tandis que la marge est l’espace hors 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 remplissage est constitué des images d’arrière-plan et des couleurs d’arrière-plan appliquées au contenu, tandis que la marge ne contient pas ce type de contenu..

• Les marges des blocs adjacents peuvent se chevaucher sans que le remplissage ne se chevauche.

Résumé:

Rembourrage vs Marge

Le rembourrage est l'espace situé dans la bordure d'un bloc qui sépare la bordure du contenu. La marge est l’espacement à l’extérieur de la frontière qui sépare un bloc des blocs adjacents. Une autre différence est que le remplissage inclut l'image de fond et les couleurs de fond appliquées autour du contenu, alors que la marge n'en contient pas. Les marges des blocs adjacents peuvent parfois se chevaucher lorsque le navigateur affiche la page, mais cela ne se produira pas..

Images de courtoisie:

  1. Modèle de boîte CSS par Felix.leg (CC BY-SA 3.0)