Quelle est exactement la différence entre margin et padding en CSS? Il ne semble vraiment pas servir à grand-chose. Pourriez-vous me donner un exemple de où se situent les différences (et pourquoi il est important de connaître la différence)?
Aussi, consultez ces sites pour une définition. Mais le graphique est une illustration parfaite. w3schools.com/css/css_margin.asp w3schools.com/css/css_padding.asp
@maclunian: Consultez également ce site w3schools.com/css/css_boxmodel.asp en plus des liens de @Suroot ci-dessus.
Une chose clé qui manque dans les réponses ici :
Les marges haut et bas se chevauchent.
Donc, si vous avez une marge de 20px en bas d'un élément et une marge de 30px en haut du prochain élément, la marge entre les deux éléments sera de 30px au lieu de 50px. Cela ne s'applique pas aux marges ou au padding gauche/droite.
La marge est appliquée à l'extérieur de votre élément, ce qui affecte la distance entre votre élément et les autres éléments.
Le remplissage (padding) est appliqué à l'intérieur de votre élément, ce qui affecte la distance entre le contenu de votre élément et la bordure.
De plus, l'utilisation de la marge n’affectera pas les dimensions de votre élément, alors que le remplissage (padding) rendra les dimensions de vos éléments (hauteur définie + remplissage) donc par exemple si vous avez une div de 100x100px avec un remplissage de 5px, votre div sera en fait de 105x105px
Ehm, à ma connaissance, le rembourrage ne modifie pas la largeur de votre élément si cette largeur a été définie sur autre chose que auto. Si la largeur est auto, alors un rembourrage supplémentaire augmentera la largeur de l'élément rembourré en conséquence (et des deux côtés, comme l'a mentionné @2013Asker)
La définition la plus simple est la suivante ; le padding est un espace donné à l'intérieur de la bordure de l'élément conteneur et la marge est donnée à l'extérieur. Pour un élément qui n'est pas un conteneur, le padding peut ne pas avoir beaucoup de sens, mais la marge aidera certainement à l'arranger.
Les marges en CSS constituent les espaces vertical et horizontal entre les éléments. Si les éléments n'ont pas de marges autour d'eux, ils se heurteront les uns contre les autres. Certains éléments ont des marges par défaut, donc même si vous n'avez pas ajouté de marge, vous en verrez peut-être toujours une. L'espace à l'extérieur, ou entre, les éléments constitue les zones de marge. Cette zone serait également à l'extérieur de toute bordure définie sur les éléments.
Alors que le rembourrage d'un élément est l'espace horizontal et vertical défini autour de la zone de contenu de l'élément ciblé. Le rembourrage est donc à l'intérieur d'une boîte, pas à l'extérieur. Ainsi, le rembourrage est la zone à l'intérieur de l'élément qui sépare le contenu de l'élément des bords de l'élément. (Merci à Louis Lazaris)
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
15 votes
stackoverflow.com/questions/2189452/… stackoverflow.com/questions/3060456/… stackoverflow.com/questions/4619899/… Premiers trois liens de la recherche
padding vs margin. Je pense que nous devons ajouter des flèches à la barre de recherche et les rendre vertes.2 votes
Cela pourrait vous aider à comprendre la différence digizol.com/2006/12/margin-vs-padding-css-properties.html
2 votes
Sachez également que Internet Explorer additionne différemment les largeurs de marges/bordures/rembourrages (en mode standard non quirks) que presque tous les autres navigateurs.
1 votes
Si la marge ne fonctionne pas, essayez le rembourrage