Lors de l'utilisation de la marge vs rembourrage en CSS
Lors de l'écriture de CSS, est-il une règle ou une directive qui doit être utilisé au moment de décider quand utiliser margin
et quand utiliser padding
?
- Utilisation
padding
sur<a>
des balises lorsque vous souhaitez augmenter la focusable région.
Vous devez vous connecter pour publier un commentaire.
TL;DR: Par défaut j'utilise la marge partout, sauf quand j'ai une frontière ou d'arrière-plan et que vous souhaitez augmenter l'espace à l'intérieur visible de la boîte.
Pour moi, la plus grande différence entre le rembourrage et la marge est verticale, les marges de l'auto-effondrement, et le rembourrage n'est pas.
Tenir compte de deux éléments l'un sur l'autre les uns avec rembourrage de
1em
. Ce remplissage est considéré comme faisant partie de l'élément et est toujours conservé.De sorte que vous finirez vers le haut avec le contenu de l'élément premier, suivi par le remplissage de l'élément premier, suivi par le rembourrage de la deuxième, suivi par le contenu du deuxième élément.
Donc le contenu de ces deux éléments sera à la fin
2em
à part.Maintenant remplacer le rembourrage avec cadratin (1 em marge. Les marges sont considérées comme en dehors de l'élément, et les marges des éléments adjacents se chevauchent.
Donc dans cet exemple, vous allez vous retrouver avec le contenu du premier élément suivie par
1em
de la marge combinée suivie par le contenu du deuxième élément. De sorte que le contenu de ces deux éléments n'est1em
à part.Cela peut être très utile lorsque vous savez que vous voulez dire
1em
de l'espacement autour d'un élément, peu importe de quel élément il est à côté.Les deux autres grandes différences sont que le rembourrage est inclus dans la cliquez sur la région et la couleur de fond/image, mais pas de la marge.
box-sizing: border-box;
donc si vous avezwidth: 100px; padding-left: 20px;
la largeur totale sera toujours 100px mais la zone de contenu est de réduire de 20px, contrairement àbox-sizing: content-box;
où rembourrage est distinct dans le calcul du contenu de la largeur, ce qui rend votre largeur totale de 120px dans le contenu de la boîte;Marge est à l'extérieur des éléments de bloc, tandis que le rembourrage à l'intérieur.
padding(A) + padding(B) + max(margin(A), margin(B))
<a>
, qui contient du texte, entouré de rembourrage et de la marge. Utiliser cette astuce pour vérifier combien d'espace, nous pouvons cliquez sur.Le meilleur que j'ai vu d'expliquer cela avec des exemples, des schémas, et même un " essayez vous-même est d'avis ici.
Le diagramme ci-dessous donne je trouve un instant compréhension visuelle de la différence.
Une chose à garder à l'esprit est conforme aux standards des navigateurs (IE caprices est une exception) rendre uniquement le contenu de la portion de la largeur, afin de garder une trace de cela dans la présentation des calculs. Notez également que la zone de bordure, c'est de voir un peu de retour avec Bootstrap 3 de le soutenir.
Il y a plus d'explications techniques pour votre question, mais si vous êtes à la recherche d'un moyen de penser marge & padding pour vous aider à choisir quand et comment les utiliser, ce qui pourrait aider.
Comparer les éléments de bloc à des photos à accrocher sur un mur:
Moment de choisir entre la marge & padding, c'est une bonne règle de base à retenir pour utiliser marge lorsque vous êtes à l'espacement d'un élément en relation avec d'autres choses sur le mur, et rembourrage lorsque vous êtes réglage de l'apparence de l'élément lui-même. Marge ne va pas changer la taille de l'élément, mais rembourrage sera généralement faire le plus grand élément1.
1 Cette valeur par défaut du modèle de boîte peut être modifié avec les
box-sizing
l'attribut.box-sizing: border-box
faire "l'espace pour le contenu plus petits". Voici un violon avec 2 boîtes où, si j'ai gardé le rembourrage de la même et a ajouté: "Active", puis "Désactiver" sur le vol stationnaire, il n'a pas d'importance si j'ai utilisébox-sizing
. Il serait encore élargir la zone. J'ai dû max le rembourrage de plus la zone de l'élargir à d', puis utiliser la méthode d'essai et d'erreur pour trouver une correspondance de combinaison pour les autres mots de passe dans la boîte qui devrait garder la même largeur pour chaque mot: jsfiddle.net/navyjax2/ngzqqjahborder-box
(voir: jsfiddle.net/8yravLmL/1). Je vais faire ma réponse plus nuancée pour éviter toute confusion.MARGE vs REMBOURRAGE :
Marge est utilisé dans un élément afin de créer de la distance entre cet élément et d'autres éléments de la page. Où rembourrage est utilisé pour créer une distance entre le contenu et la bordure d'un élément.
Marge n'est pas une partie de l'élément où le rembourrage est la partie de l'élément.
Veuillez consulter ci-dessous image extraite de la Marge Vs Rembourrage des Propriétés CSS
Voici le code HTML qui montre comment
padding
etmargin
affecter clickability, et le fond de remplissage. Un objet reçoit clics à son rembourrage, mais clique sur un des objets de la marge avais région vont à ses parents.JS:
CSS:
HTML:
La chose à propos de marges, c'est que vous n'avez pas besoin de s'inquiéter à propos de la largeur de l'élément.
Comme quand vous donnez quelque chose
{padding: 10px;}
, vous devrez réduire la largeur de l'élément par 20px à garder le 'ajustement " et de ne pas déranger les autres éléments autour de lui.J'ai donc généralement commencer en utilisant les rembourrages pour obtenir tout "
packed
" et ensuite utiliser des marges pour des modifications mineures.Une autre chose à prendre en compte est que les rembourrages sont plus homogène sur les différents navigateurs IE et ne permet pas de traiter des marges négatives très bien.
De https://www.w3schools.com/css/css_boxmodel.asp
Exemple vivant (jouer en changeant les valeurs):
https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel
La marge efface une zone autour d'un élément (en dehors de la frontière), mais le rembourrage efface une zone autour du contenu (à l'intérieur de la bordure d'un élément.
cela signifie que votre élément ne sais pas à propos de son à l'extérieur des marges, donc si vous êtes en développement web dynamique contrôles, je recommande d'utiliser un rembourrage vs marge, si vous le pouvez.
noter que certaines fois, vous avoir à utiliser la marge.
Une chose à noter est quand auto effondrement des marges de vous ennuyer (et vous n'êtes pas à l'aide de couleurs d'arrière-plan sur votre éléments), quelque chose, c'est juste plus facile à utiliser rembourrage.
Il est bon de connaître les différences entre les
margin
etpadding
. Voici quelques différences:Marge est espace extra-atmosphérique d'un élément, tandis que le rembourrage est espace intérieur d'un élément.
Marge est l'espace extérieur de la bordure d'un élément, tandis que le remplissage est l'espace à l'intérieur de la frontière de cela.
Marge accepte la valeur de l'auto:
margin: auto
, mais vous ne pouvez pas définir de remplissage automatique.Marge peut être réglé à n'importe quel nombre, mais le remplissage doivent être non négatif.
Quand vous le style d'un élément de rembourrage sera aussi affecté (par exemple la couleur de fond), mais pas de marge.
Avancée de la Marge contre Rembourrage Expliqué
Il est inapproprié d'utiliser
padding
à l'espace contenu dans un élément; vous doit utilisermargin
sur le élément enfant à la place. Les anciens navigateurs tels que Internet Explorer mal interprété le modèle de boîte, sauf quand il est venu à l'aide demargin
qui fonctionne parfaitement dans Internet Explorer 4.Il y a deux exceptions lors de l'utilisation de
padding
est approprié d'utiliser:Il est appliqué à un élément inline qui ne peut pas contiennent des éléments enfants comme un élément de saisie.
Vous êtes à la compensation pour une très divers navigateur bug qui un fournisseur *tousse* Mozilla *tousse* refuse de le réparer et sont certains (le degré que vous tenez à des échanges réguliers avec le W3C et le WHATWG éditeurs) que vous doit ont une solution et cette solution n'aura pas d'effet le style de rien d'autre que le bogue que vous compenser.
Quand vous avez 100% de la largeur de l'élément avec
padding: 50px;
, vous pouvez effectivement obtenirwidth: calc(100% + 100px);
. Depuismargin
est pas ajouté à lawidth
il ne sera pas provoquer inattendu problèmes de mise en page lorsque vous utilisezmargin
surchild elements
au lieu depadding
directement sur l'élément.Donc, si vous êtes pas procédant de l'une de ces deux choses ne pas ajouter le remplissage de l'élément, mais c'est direct de l'enfant/les enfants ou les élément(s) pour vous assurer que vous allez obtenir le devrait comportement dans tous navigateurs.
Premièrement, regardons quelles sont les différences et ce que chacun la responsabilité de l'est:
Donc simplement Marges d'espace autour des éléments, tandis que Rembourrage sont l'espace autour de contenus qui font partie de l'élément.
Cette image de codemancers montre comment les marges et les frontières obtenir la collaboration et comment la zone de bordure et le contenu de la boîte de le rendre différent.
Aussi ils définissent chaque section comme ci-dessous:
J'ai toujours utiliser ce principe:
C'est le modèle de boîte de les inspecter l'élément dans Firefox. Il fonctionne comme un oignon:
à l'intérieur.
Donc de plus grandes marges de faire plus d'espace autour de la zone qui contient votre contenu.
Plus de rembourrage permettra d'augmenter l'espace entre votre contenu et de la zone dont il est à l'intérieur.
Aucun d'eux va augmenter ou diminuer la taille de la boîte si elle est définie sur une valeur spécifique.
Marge
Marge est généralement utilisé pour créer un espace entre l'élément lui-même et de son surround.
par exemple je l'utilise quand je suis en train de construire une barre de navigation pour en faire des bâtons sur les bords de l'écran et par aucun espace blanc.
Rembourrage
J'ai l'habitude de l'utiliser quand j'ai un élément à l'intérieur d'une frontière,
<div>
ou quelque chose de semblable, et je veux diminuer sa taille mais à l'époque, je veux garder la distance ou de la marge entre les autres éléments autour d'elle.Très brièvement, c'est la situation; il dépend de ce que vous essayez de faire.
Marge est en dehors de la boîte et le rembourrage est à l'intérieur de la boîte de