Quand utiliser marge vs padding en CSS
Lors de l'écriture de CSS, existe-t-il une règle ou une directive particulière à utiliser pour décider quand utiliser margin et quand utiliser padding?
TL; DR: Par défaut, j'utilise la marge partout, sauf lorsque j'ai une bordure ou un arrière-plan et que je souhaite augmenter l'espace à l'intérieur de cette zone visible.
Pour moi, la plus grande différence entre le remplissage et la marge réside dans le fait que les marges verticales se réduisent automatiquement, contrairement au remplissage.
Considérons deux éléments l'un au dessus de l'autre avec un remplissage de 1em. Ce remplissage est considéré comme faisant partie de l'élément et est toujours conservé.
Vous allez donc vous retrouver avec le contenu du premier élément, suivi du remplissage du premier élément, suivi du remplissage du deuxième, suivi du contenu du deuxième élément.
Ainsi, le contenu des deux éléments finira par être séparé de 2em.
Maintenant, remplacez ce rembourrage avec une marge de 1em. Les marges sont considérées comme en dehors de l'élément et les marges des éléments adjacents se chevauchent.
Ainsi, dans cet exemple, vous obtiendrez le contenu du premier élément suivi de 1em de la marge combinée, suivi du contenu du deuxième élément. Le contenu des deux éléments n’est donc que 1em séparé.
Cela peut être très utile lorsque vous savez que vous voulez dire 1em d'espacement autour d'un élément, quel que soit l'élément voisin.
Les deux autres grandes différences sont que le remplissage est inclus dans la zone de clic et la couleur/image d'arrière-plan, mais pas dans la marge.
La marge est à l'extérieur des éléments de bloc tandis que le rembourrage est à l'intérieur.
- Utilisez la marge pour séparer le bloc des éléments extérieurs
- Utilisez un rembourrage pour éloigner le contenu des bords du bloc.
Le meilleur que j'ai vu expliquer cela avec des exemples, des diagrammes et même une vue "essayez-le vous-même" est ici .
Le diagramme ci-dessous, je pense, donne une compréhension visuelle instantanée de la différence.
Il convient de garder à l'esprit que les navigateurs conformes aux normes ( les exceptions IE sont une exception ) rendent uniquement la portion de contenu à la largeur donnée, aussi gardez cela en compte dans les calculs de mise en page. Notez également que la boîte de frontière voit un peu d'un retour avec Bootstrap le prenant en charge.
Il existe d'autres explications techniques à votre question, mais si vous cherchez un moyen de penser à la marge et le remplissage qui vous aideront à choisir quand et comment les utiliser, cela pourrait Aidez-moi.
Comparez les éléments de bloc aux images suspendues au mur:
- La fenêtre du navigateur est semblable au mur.
- Le contenu est semblable à une photo.
- La marge est identique à l'espace entre les images encadrées.
- Le rembourrage est semblable au matage autour d'une photo.
- La bordure est semblable à la bordure d'un cadre.
Lorsque vous choisissez entre les marges et les marges, c’est une bonne règle d’usage d’utiliser des marges pour espacer un élément par rapport à d’autres éléments sur le mur, et le remplissage lorsque vous ajustez l'apparence de l'élément lui-même. La marge ne changera pas la taille de l'élément, mais le remplissage rendra l'élément plus gros1.
1 Ce modèle de boîte par défaut peut être modifié avec l'attribut box-sizing) .
MARGE vs REMPLISSAGE:
La marge est utilisée dans un élément pour créer une distance entre cet élément et les autres éléments de la page. Où le remplissage est utilisé pour créer une distance entre le contenu et la bordure d'un élément.
La marge ne fait pas partie d'un élément où le rembourrage fait partie de l'élément.
Veuillez vous reporter ci-dessous. Image extraite de Margin Vs Padding - Propriétés CSS
De https://www.w3schools.com/css/css_boxmodel.asp
Explication des différentes parties:
Contenu - Le contenu de la boîte, où le texte et les images apparaissent
Padding - Efface une zone autour du contenu. Le rembourrage est transparent
Bordure - Une bordure qui entoure le remplissage et le contenu
Marge - Efface une zone en dehors de la frontière. La marge est transparente
Exemple en direct (jouer en modifiant les valeurs): https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel
Voici un exemple HTML qui montre comment padding et margin affectent la cliquabilité et le remplissage en arrière-plan. Un objet reçoit des clics sur son remplissage, mais les clics sur une zone de marge d'objets vont sur son parent.
$(".outer").click(function(e) {
console.log("outer");
e.stopPropagation();
});
$(".inner").click(function(e) {
console.log("inner");
e.stopPropagation();
});.outer {
padding: 10px;
background: red;
}
.inner {
margin: 10px;
padding: 10px;
background: blue;
border: solid white 1px;
}<script src="http://code.jquery.com/jquery-latest.js"></script>
<div class="outer">
<div class="inner" style="position:relative; height:0px; width:0px">
</div>
</div>Le problème avec les marges est que vous n'avez pas à vous soucier de la largeur de l'élément.
Comme lorsque vous donnez quelque chose {padding: 10px;}, vous devrez réduire la largeur de l'élément de 20px pour conserver le 'fit' et ne pas déranger les autres éléments autour il.
Je commence donc généralement par utiliser des rembourrages pour obtenir tout ce qui se trouve 'packed' ', puis j'utilise les marges pour les modifications mineures.
Une autre chose à prendre en compte est que les bourrages sont plus cohérents sur différents navigateurs et que IE ne traite pas très bien les marges négatives.
La marge efface une zone autour d'un élément (en dehors de la bordure), mais le remplissage efface une zone autour du contenu (à l'intérieur de la bordure) d'un élément.
cela signifie que votre élément ne connaît pas ses marges extérieures. Par conséquent, si vous développez des contrôles Web dynamiques, je vous recommande d'utiliser le remplissage/la marge si vous le pouvez.
notez que vous devez parfois utiliser la marge.
Une chose à noter est que lorsque vous réduisez automatiquement les marges (vous n'utilisez pas de couleurs d'arrière-plan sur vos éléments), il est tout simplement plus facile d'utiliser le remplissage.
Il est bon de connaître les différences entre margin et padding. Voici quelques différences:
La marge est espace extra-atmosphérique d'un élément, tandis que le remplissage est espace intérieur d'un élément.
La marge est l'espace situé en dehors de la bordure d'un élément, tandis que le remplissage est l'espace situé à l'intérieur de la frontière.
La marge accepte la valeur auto:
margin: auto, mais vous ne pouvez pas définir le remplissage sur auto.La marge peut être définie sur n'importe quel nombre, mais le remplissage ne doit pas être négatif.
Lorsque vous modifiez un élément, le remplissage est également affecté (couleur d'arrière-plan, par exemple), mais pas la marge.
Explication de la marge avancée contre le rembourrage
Il est inapproprié d'utiliser padding pour espacer le contenu d'un élément; vous devez utiliser plutôt margin sur l'élément enfant . Des navigateurs plus anciens, tels qu'Internet Explorer, ont mal interprété le modèle de boîte, sauf en ce qui concerne l'utilisation de margin, qui fonctionne parfaitement dans Internet Explorer 4 .
Il y a deux exceptions lorsque padding est approprié:
Il est appliqué à un élément en ligne qui ne peut contenir aucun élément enfant tel qu'un élément d'entrée.
Vous compensez un bogue de navigateur extrêmement divers qu'un vendeur * tousser * Mozilla * tousser * refuse de corriger et est certain (dans la mesure où vous entretenez des échanges réguliers avec les éditeurs W3C et WHATWG) que vous doit avoir une solution qui fonctionne et cette solution n’affectera pas le style de quelque chose que le bogue que vous corrigez.
Lorsque vous avez un élément de largeur à 100% avec padding: 50px;, vous obtenez effectivement width: calc(100% + 100px);. Puisque margin est pas ajouté au width, cela ne causera pas de problèmes de mise en page inattendus si vous utilisez margin sur child elements au lieu de padding directement sur l'élément.
Donc, si vous ne faites pas faites l'une de ces deux choses ne faites pas ajoutez un élément de remplissage à l'élément mais à son élément enfant/enfants direct pour vous assurer que vous obtiendrez le comportement attendu dans tous les navigateurs .
Voyons d’abord quelles sont les différences et quelle est chaque responsabilité:
1) Marge
Les propriétés de la marge CSS permettent de générer de l’espace autour des éléments.
Les propriétés de la marge définissent la taille de l'espace blanc à l'extérieur de la bordure. Avec CSS, vous avez un contrôle total sur les marges.
Il existe des propriétés CSS permettant de définir la marge de chaque côté d'un élément (haut, droite, bas et gauche).
2) Rembourrage
Les propriétés de remplissage CSS permettent de générer de l’espace autour du contenu.
Le remplissage efface une zone autour du contenu (à l'intérieur de la bordure) d'un élément.
Avec CSS, vous avez le plein contrôle du remplissage. Il existe des propriétés CSS permettant de définir le remplissage de chaque côté d'un élément (haut, droite, bas et gauche).
Donc, tout simplement Les marges représentent un espace autour d'éléments, tandis que un padding représente un espace autour d'un contenu qui font partie de l'élément.
Cette image de codemancers montre comment la marge et les bordures se combinent et en quoi diffère la zone de bordure et la zone de contenu.
Ils définissent également chaque section comme ci-dessous:
- Contenu - définit la zone de contenu de la boîte contenant le contenu réel, tel que du texte, des images ou peut-être d'autres éléments.
- Padding - efface le contenu principal de la zone qui le contient.
- Bordure - Cela entoure à la fois le contenu et le remplissage.
- Marge - cette zone définit un espace transparent qui la sépare des autres éléments.
J'utilise toujours ce principe:
Ceci est le modèle de boîte de la fonctionnalité élément inspect dans Firefox. Cela fonctionne comme un oignon:
- Votre contenu est au milieu.
- Le rembourrage est un espace entre votre contenu et le bord de la balise dans lequel il se trouve.
- La frontière et ses spécifications
- La marge est l'espace autour de la balise.
Ainsi, des marges plus grandes créeront plus d'espace autour de la zone contenant votre contenu.
Un rembourrage plus important augmentera l'espace entre votre contenu et la boîte dans laquelle il se trouve.
Ni l'un ni l'autre n'augmentera ou diminuera la taille de la boîte si elle est définie sur une valeur spécifique.
Margin
La marge est généralement utilisée pour créer un espace entre l'élément lui-même et son entourage.
par exemple, je l'utilise lorsque je construis une barre de navigation pour la faire coller aux bords de l'écran et pour ne laisser aucun espace blanc.
Rembourrage
J'utilise généralement lorsque j'ai un élément à l'intérieur d'une bordure, <div> ou quelque chose de similaire, et que je veux réduire sa taille, mais que je souhaite conserver la distance ou la marge entre les autres éléments qui l'entourent.
Donc brièvement, c'est situationnel; cela dépend de ce que vous essayez de faire.
La marge est en dehors de la boîte et le rembourrage est à l'intérieur de la boîte