CSS, divs imbriqués et marges contre rembourrage

Je comprends totalement le modèle de boîte. cette question est plus à propos d'essayer de cerner une méthodologie sémantique concernant quand utiliser les marges et quand utiliser le remplissage.CSS, divs imbriqués et marges contre rembourrage

ici est un exemple typique,

premier, en anglais simple:

Situation: nous avons un conteneur div, à l'intérieur duquel il y a un élément de paragraphe.
objectif: avoir un espace de 12px entre l'intérieur de la div et l'extérieur du paragraphe.
option a) appliquer 12px de rembourrage au conteneur div
l'option b) appliquer 12px marges à 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;}

l'option b)

p {margin: 12px;}

Cheers!

Jon

Source

2009-09-14 jon

je pensais qu'il y avait une question .. est-il un? – jrharshath

"méthodologie sémantique"? Je ne pense pas que cela signifie ce que vous pensez que cela signifie. – annakata

Personnellement, je préfère l'option A. Pourquoi? Dites maintenant que je dois ajouter d'autres éléments HTML dans la div et 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.

Source

2009-09-14 03:14:48 Dhana

pour moi, c'est la meilleure réponse. mais vous devez considérer votre situation spécifique. voir la réponse de "Itay Moav". – jon

verticale rembourrage sur la division - parce que si je décidé que je voulais un montant différent de l'espace vertical entre les multiples paragraphes utiliseraient des marges inférieures, et le rembourrage en haut/bas de la division englobante assez beaucoup restera toujours intact en supposant que vous avez juste des éléments statiquement positionnés à l'intérieur.

Source

2009-09-14 03:13:36

Cela dépend de ce que vous essayez d'accomplir visuellement. Est-ce que container aurait d'autres éléments enfants qui pourraient pendre dans la gouttière de chaque côté du paragraphe? Si oui, une marge a plus de sens. Mais si container doit avoir une gouttière de 12 pixels pour tous les éléments, point, il est plus judicieux d'utiliser le remplissage pour éviter d'avoir à appliquer des marges à plusieurs ensembles d'éléments.

D'une manière générale, vous souhaitez toujours que les paragraphes aient des marges verticales pour garantir la cohérence des paragraphes.

Source

2009-09-14 03:13:59

que voulez-vous dire par "gouttière"? :) – jon

@jon la gouttière est l'espace inutilisé sur un ou plusieurs côtés du texte. C'est différent d'une marge car il peut être logique qu'un élément graphique reste dans le caniveau. –

merci d'expliquer! – jon

La différence est l'endroit où la bordure se trouve.

La bordure se trouve SMACK DAB au milieu des marges et du remplissage. Si vous spécifiez des marges, il s'agit d'un espace blanc à l'extérieur de la bordure.

Si vous spécifiez un rembourrage, qui est l'espace blanc à l'intérieur de la frontière (pousse la frontière plus loin de l'élément)

Ne peut pas vous montrer ici en raison de décapage 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!

rembourrage
apporte la couleur de fond de l'élément, les marges sont essentiellement transparent
certains éléments (comme td) semblent ne pas tenir compte des marges, alors qu'ils réagissent aux changements dans le rembourrage

Source

2009-09-14 03:16:05 bobobobo

à droite. mais qu'en est-il quand il n'y a pas de frontière impliquée?:) – jon

Quelques éléments à prendre en compte: - le remplissage apporte 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éagissent aux changements de remplissage – bobobobo

Personnellement, j'irais avec l'option a de #container {padding: 12px;} car il fait amplement clair que tous les éléments enfants doivent rester 12px loin de la frontière de cette div.

Si je souhaite que les autres éléments restent éloignés de plus de 12 pixels de la bordure de #container, j'applique autant de marge à cet élément.

À la votre!

Source

2009-09-14 03:17:03 jrharshath

et des marges Paddings donne le même effet, sauf dans les cas suivants (je pourrais manquer un peu):

Vous avez une sorte de propriétés d'arrière-plan. Les marges ne les obtiendront pas.
Vous avez une frontière
Vous utilisez TD (sans marge)
Deux éléments imbriqués, les marges sont effondrés ensemble, où rembourrages pas.
(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, pls éditer cela).

Source

2009-09-14 04:01:23

Ce bogue dans css, voici des exemples:

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

http://creexe.zxq.net/div-issue-margin.html = marge numéro

les balises div rouge et vert dans les exemples ont été créés par la propriété css TOP, mais elle a ses propres inconvénients que TOP, BOTTOM etc ne fonctionne que lorsque la position de l'étiquette div est absolue et relative, mais pas statique

Source

2011-12-01 14:49:39 saurabh

CSS, divs imbriqués et marges contre rembourrage

Répondre

Questions connexes