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 l'utiliser padding
?
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 l'utiliser padding
?
Réponses:
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 est que les marges verticales se réduisent automatiquement, et le remplissage ne le fait pas.
Considérez deux éléments l'un au-dessus de l'autre avec un rembourrage de 1em
. Ce remplissage est considéré comme faisant partie de l'élément et est toujours conservé.
Vous vous retrouverez donc avec le contenu du premier élément, suivi du remplissage du premier élément, suivi du remplissage du second, suivi du contenu du deuxième élément.
Ainsi, le contenu des deux éléments finira par être 2em
différent.
Remplacez maintenant ce rembourrage par 1em de marge. Les marges sont considérées comme étant en dehors de l'élément et les marges des éléments adjacents se chevauchent.
Ainsi, dans cet exemple, vous vous retrouverez avec le contenu du premier élément suivi 1em
de la marge combinée suivie 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
de l'espacement autour d'un élément, quel que soit l'élément à côté duquel il se trouve.
Les deux autres grandes différences sont que le rembourrage est inclus dans la zone de clic et la couleur / image d'arrière-plan, mais pas la marge.
div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }
<h3>Default</h3>
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<h3>padding-top: 20px</h3>
<div class="box padding">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<h3>margin-top: 20px; </h3>
<div class="box margin">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
box-sizing: border-box;
donc si vous avez width: 100px; padding-left: 20px;
la largeur totale sera toujours de 100 pixels, mais la zone de contenu est réduite de 20 pixels, contrairement au box-sizing: content-box;
rembourrage séparé dans le calcul de la largeur du contenu. ce qui fait votre largeur totale 120px dans la boîte de contenu;
La marge est à l'extérieur des éléments de bloc tandis que le rembourrage est à l'intérieur.
padding(A) + padding(B) + max(margin(A), margin(B))
<a>
, qui contient du texte, entouré de rembourrage et de marge. Utilisez cette astuce pour vérifier la quantité d'espace sur laquelle nous pouvons cliquer.
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 .
Je pense que le diagramme ci-dessous donne une compréhension visuelle instantanée de la différence.
Une chose à garder à l'esprit est que les navigateurs conformes aux normes (les bizarreries IE sont une exception ) ne rendent que la partie du contenu à la largeur donnée, alors gardez-en une trace dans les calculs de mise en page. Notez également que la boîte de bordure voit un peu un retour avec Bootstrap 3 la prenant en charge.
Il existe des explications plus techniques à votre question, mais si vous cherchez un moyen de penser à la marge et au rembourrage qui vous aideront à choisir quand et comment les utiliser, cela pourrait vous aider.
Comparez des éléments de bloc à des images accrochées à un mur:
Lorsque vous décidez entre marge et rembourrage, c'est une bonne règle de base que d'utiliser la marge lorsque vous espérez un élément par rapport à d'autres choses sur le mur, et le rembourrage 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 rend généralement l'élément plus grand 1 .
1 Ce modèle de boîte par défaut peut être modifié avec l' box-sizing
attribut .
box-sizing: border-box
pour réduire "l'espace pour le contenu". Voici un violon avec 2 cases où, si je continuais de rembourrer le même et ajoutais "Actif", puis "Désactiver" en survol, cela n'avait pas d'importance si j'utilisais box-sizing
. Cela élargirait encore la boîte. J'ai dû maximiser le rembourrage au maximum jusqu'à ce que la boîte se développe, puis utiliser des essais et des erreurs pour trouver une combinaison correspondante pour les autres mots entrant dans la boîte qui garderait la même largeur pour chaque mot: jsfiddle.net / navyjax2 / ngzqqjah
border-box
(voir: jsfiddle.net/8yravLmL/1 ). Je vais rendre ma réponse plus nuancée pour éviter toute confusion.
MARGE vs REMBOURRAGE :
La marge est utilisée dans un élément pour créer une distance entre cet élément et d'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 remplissage fait partie de l'élément.
Veuillez vous référer à l'image ci-dessous extraite de Margin Vs Padding - Propriétés CSS
Depuis 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
Rembourrage - Efface une zone autour du contenu. Le rembourrage est transparent
Border - Une bordure qui fait le tour du rembourrage et du contenu
Marge - Efface une zone en dehors de la frontière. La marge est transparente
Exemple en direct (jouez en modifiant les valeurs): https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel
Voici quelques HTML qui montre comment padding
et margin
affecter cliquabilité, et le remplissage arrière - plan. Un objet reçoit des clics sur son remplissage, mais les clics sur une zone marginée d'un objet vont à 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>
La chose à propos des 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 20 pixels pour garder la forme et ne pas déranger les autres éléments autour de lui.
Je commence donc généralement par utiliser des rembourrages pour tout obtenir ' packed
', puis j'utilise des marges pour des ajustements mineurs.
Une autre chose à savoir est que les rembourrages sont plus cohérents sur différents navigateurs et IE ne traite pas très bien les marges négatives.
La marge efface une zone autour d'un élément (à l'extérieur 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, donc si vous développez des contrôles Web dynamiques, je vous recommande d'utiliser le remplissage par rapport à la marge si vous le pouvez.
notez que vous devez parfois utiliser la marge.
Il est bon de connaître les différences entre margin
et padding
. Voici quelques différences:
La marge est l' espace extérieur d'un élément, tandis que le remplissage est l'espace intérieur d'un élément.
La marge est l'espace à l'extérieur de la bordure d'un élément, tandis que le remplissage est l'espace à l'intérieur de la bordure de celui-ci.
La marge accepte la valeur de 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 doit être non négatif.
Lorsque vous stylisez un élément, le remplissage sera également affecté (par exemple la couleur d'arrière-plan), mais pas la marge.
Explication de la marge avancée et du rembourrage
Il est inapproprié d'utiliser padding
pour espacer le contenu d'un élément; vous devez plutôt utiliser margin
l' élément enfant . Les navigateurs plus anciens tels qu'Internet Explorer ont mal interprété le modèle de boîte, sauf en ce qui concerne l'utilisation margin
qui fonctionne parfaitement dans Internet Explorer 4 .
Il existe deux exceptions lorsque l'utilisation padding
est appropriée:
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 très divers qu'un vendeur * tousse * Mozilla * tousse * refuse de corriger et êtes certain (dans la mesure où vous avez des échanges réguliers avec les éditeurs W3C et WHATWG) que vous devez avoir une solution de travail et cette solution n'affectera pas le style d'autre chose que le bug que vous compensez.
Lorsque vous avez un élément de 100% de largeur, padding: 50px;
vous obtenez effectivement width: calc(100% + 100px);
. Étant donné que margin
n'est pas ajouté à, width
il ne causera pas de problèmes de mise en page inattendus lorsque vous utilisez margin
sur child elements
au lieu de padding
directement sur l'élément.
Donc, si vous ne faites pas l' une de ces deux choses, n'ajoutez pas de remplissage à l'élément mais à ses éléments enfants / enfants directs pour vous assurer d'obtenir 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 marge CSS sont utilisées pour générer de l'espace autour des éléments.
Les propriétés de 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 pour définir la marge de chaque côté d'un élément (en haut, à droite, en bas et à gauche).
2) Remplissage
Les propriétés de remplissage CSS sont utilisées pour 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 un contrôle total sur le rembourrage. Il existe des propriétés CSS pour définir le remplissage de chaque côté d'un élément (en haut, à droite, en bas et à gauche).
Ainsi, les marges sont simplement un espace autour des éléments, tandis que le remplissage est un espace autour du contenu qui fait partie de l'élément.
Cette image de codemancers montre comment la marge et les bordures s'unissent et comment la boîte de bordure et la boîte de contenu la rendent différente.
Ils définissent également chaque section comme suit:
- Contenu - cela définit la zone de contenu de la boîte où réside le contenu réel comme le texte, les images ou peut-être d'autres éléments.
- Remplissage - cela efface le contenu principal de sa boîte contenant.
- Bordure - cela entoure à la fois le contenu et le remplissage.
- Marge - cette zone définit un espace transparent qui le sépare des autres éléments.
J'utilise toujours ce principe:
Il s'agit du modèle de boîte de la fonction d'inspection des éléments dans Firefox. Cela fonctionne comme un oignon:
Des marges plus importantes feront donc plus d'espace autour de la boîte contenant votre contenu.
Un rembourrage plus grand augmentera l'espace entre votre contenu et la boîte dans laquelle il se trouve.
Aucun d'eux n'augmentera ou ne diminuera la taille de la boîte si elle est définie sur une valeur spécifique.
La marge est généralement utilisée pour créer un espace entre l'élément lui-même et son environnement.
par exemple, je l'utilise lorsque je construis une barre de navigation pour la faire coller aux bords de l'écran et sans espace blanc.
J'utilise habituellement quand j'ai un élément à l'intérieur d'une bordure, <div>
ou quelque chose de similaire, et je veux diminuer sa taille mais au moment où je veux garder 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
padding
sur les<a>
balises lorsque vous souhaitez augmenter la zone de mise au point .