CSS, divs imbriqués & amp; marges vs. rembourrage

StackOverflow https://stackoverflow.com/questions/1419519

  •  07-07-2019
  •  | 
  •  

Question

je comprends tout à fait le modèle de boîte. Cette question concerne plutôt l’essai d’identifier une méthodologie sémantique pour déterminer quand utiliser les marges et quand utiliser le remplissage.

voici un exemple typique,

d'abord, en clair:

  • situation: nous avons un conteneur div, à l'intérieur duquel se trouve un élément de paragraphe.

  • objectif: avoir un espace de 12 pixels entre l'intérieur du div et l'extérieur du paragraphe.

  • option a) appliquez 12px de remplissage au conteneur div

  • option b) appliquer des marges de 12 pixels à l'élément de paragraphe

ou, si vous préférez, HTML: 

<div id="container">
    <p>Hello World!</p>
</div>

et CSS:

option a) 

div#container {padding: 12px;}

option b) 

p {margin: 12px;}

Salut!

Jon

Était-ce utile?

La solution

Personnellement, je préfère l’option A. Pourquoi? Disons maintenant que je dois ajouter d'autres éléments HTML dans la div et que je veux que le remplissage soit maintenu, je n'aurais pas besoin d'ajouter d'autres règles à mes fichiers CSS pour que cela fonctionne.

Autres conseils

Les rembourrages et les marges donnent le même effet, sauf dans les cas suivants (il se peut que j'en rate quelques-uns):

  1. Vous avez des propriétés d'arrière-plan. Les marges ne les auront pas.
  2. vous avez une bordure
  3. Vous utilisez TD (aucune marge)
  4. Deux éléments imbriqués, les marges sont réduites ensemble, les remplissages non.
  5. (besoin de vérifier celui-ci) Ils affectent probablement la largeur et la hauteur de l'élément différemment. (Si quelqu'un sait mieux, les pls éditer cela).

C’est un bug en css, voici des exemples:

http://creexe.zxq.net/div-issue-padding.html = problème de remplissage

http://creexe.zxq.net/div-issue-margin.html = problème de marge

Les balises div rouge et verte dans les exemples ont été créées par la propriété css TOP, mais elle a ses propres inconvénients: TOP, BOTTOM, etc. ne fonctionne que lorsque la position de la balise div est Absolute et relative, mais pas statique

Cela dépend de ce que vous essayez d'accomplir visuellement. conteneur aurait-il d'autres éléments enfants susceptibles de se bloquer dans le caniveau de part et d'autre du paragraphe? Si c'est le cas, une marge a plus de sens. Mais si conteneur doit avoir une gouttière de 12 pixels pour tous les éléments, il est préférable d'utiliser le remplissage pour éviter d'avoir à appliquer des marges à plusieurs ensembles d'éléments.

En règle générale, vous souhaitez toujours que les paragraphes comportent des marges verticales pour assurer l'uniformité de leur interligne.

Personnellement, je choisirais l'option a de #container {padding: 12px;} , car il est clair que tous les éléments enfants doivent rester à 12 pixels de la frontière de cette div.

Si je veux que d'autres éléments restent à plus de 12 pixels de la bordure du #container , j'applique autant de marge à cet élément.

Salut!

Rembourrage vertical sur la division - parce que si je décidais de choisir un espace vertical différent entre les multiples paragraphes, j'utiliserais les marges du bas et le remplissage haut / bas de la division englobante restera pratiquement intact en supposant vous avez juste des éléments positionnés de manière statique à l'intérieur.

La différence réside à l'endroit où se trouve la frontière.

La bordure repose SMACK DAB au milieu des marges et du remplissage. Si vous spécifiez des marges, l’espace est situé à l’extérieur de la bordure.

Si vous spécifiez un remplissage, il s'agit d'un espace dans la bordure (éloigne la bordure de l'élément)

Vous ne pouvez pas vous montrer ici en raison de la suppression de fichiers CSS, mais essayez ceci: 

<body style="background-color: #aaa">
<p style="background-color: #aee; margin: 40px; padding: 40px; border: solid 2px black;">
  i have margins, padding and a border.
</p>

<p style="background-color: #aee; margin: 40px; padding: 0; border: solid 2px black;">
  i have margins, and a border.
</p>

<p style="background-color: #aee; margin: 0; padding: 40px; border: solid 2px black;">
  i have padding and a border.
</p>
</body>

autres choses!

  • le remplissage ajoute la couleur de fond de l'élément, les marges sont fondamentalement transparentes

  • certains éléments (comme td) semblent ignorer les marges, alors qu'ils répondent aux changements de remplissage

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top