Modèle de boîte CSS (les marges et padding) pour l'espacement vertical entre les paragraphes

Comment doit-CSS 'marge' et 'padding' être utilisé à la verticale inter-espacement de paragraphe:

  • Peut l'espace vertical entre les paragraphes être définie à l'aide de rembourrage et/ou de l'utilisation de marges?
  • Si on peut le faire avec, ce qui est le mieux ou de plus normal?
  • Avez-vous tendance à définir la non-zéro de remplissage et non-zéro les marges, et si oui, alors combien de chaque?

La Exemple de marges, le remplissage et les frontières explique en théorie quelle est la différence entre la marge et le remplissage: je suis questionner sur la façon dont beaucoup de chacun d'utiliser dans la pratique, pour rendre une vie normale, de bonne à la recherche de la page.

Deuxièmement, compte tenu de balisage tel que ...

<p>Paragraph.</p>
<ul>
<li>List item.</li>
<li>Another list item.
<p>List paragraph.</p>
</li>
</ul>

Si vous voulez l'égalité de l'espace vertical entre chaque paragraphe et/ou un élément de liste, puis:

  • Auriez-vous tendance à définir la <ul> comme ayant zéro marge de+rembourrage de son propre chef?
  • Ou l' <ul> normalement non nulle de la marge, ce qui pourrait avoir aucun effet, parce que cette marge sera effondré avec la marge de la <li> l'intérieur et de la <p> qui le précède?

Troisièmement (et je ne suis pas sûr si je dois poser cette troisième question), le spécification de l'effondrement des marges dit, "Si les marges supérieure et inférieure de la boîte sont adjacentes, alors il est possible pour les marges à l'effondrement." Si j'ai un paragraphe vide comme le suivant dans le milieu ...

<p>Hello</p>
<p></p>
<p>World</p>

... alors je m'attends à le voir comme un paragraphe vide, c'est à dire avec un montant supplémentaire de l'espace vertical entre les Hello et la World:

  • Ce qui pourrait les empêcher ce paragraphe vide les marges de l'effondrement, et le paragraphe vide, par conséquent, d'être invisible: il est non-zéro de remplissage qui fait cela?
  • Dans ce scénario est utile pour une boîte d'avoir attenante marges supérieure et inférieure qui s'effondrer?

Des réponses à tout ou partie de ces trois questions seront les bienvenus.

Je ne suis pas particulièrement intéressé par IE spécifiques du modèle de boîte de problèmes en ce moment: à la place, je veux savoir sur la façon d'utiliser le standard.

OriginalL'auteur ChrisW | 2009-02-20

  1. 3

    Pour répondre à votre première question, il n'a généralement pas d'importance si vous utilisez des marges ou de rembourrage pour ajouter un espacement entre les éléments, cependant, si vous appliquez une bordure à un élément et à l'utilisation de rembourrage pour faire de la place, il va pousser à la frontière de loin.

    Pour vous répondre à la deuxième question, il suffit de prendre un coup d'oeil à ce code et peut-être de jouer avec elle:

    <html>
<head>
<title>Box Model Tests</title>
<style type="text/css">
/* Just to get rid of the annoying padding/margin setting that is default
 in most browsers on the body tag from messing up our experiments */
body{
margin: 0px;
padding: 0px;
}
p{
margin: 0px;
padding: 0px;
}
/* It appears that if you modify the ul padding it tends
 to remove the bullet points, that is if you set the paddign to zero */
ul{
margin: 0px;
}
</style>
</head>
<body>
<p>Paragraph.</p>
<ul>
<li>List item.</li>
<li>Another list item.
<p>List paragraph.</p>
</li>
</ul>
</body>
</html>

    Garder à l'esprit que, dans l'exemple au-dessus de tout le reste de l'espace a à voir avec les propriétés de la police, qui peut être changé en utilisant les mêmes méthodes que n'importe quel autre élément.

    Et pour le troisième:

    Je pense que "garrow' est juste sur le vide <p>
    Je n'ai pas rencontrer ce genre de problème qui, souvent, comme je l'ai utiliser <p> de moins en moins dans mes mises en page, cependant cet article l'air très intéressant, et je pense que offre une meilleure explication que le W3C n'.

    Ah! Il y a un indice, dans votre première phrase: peut-il être normal de spécifier les marges (parce qu'ils effondrement gentiment) au lieu de spécifier le rembourrage (c'est à dire spécifier zéro de remplissage)? Sauf que vous spécifiez un rembourrage lorsque vous spécifiez également une frontière, parce que dans ce cas, vous voulez un peu de rembourrage à l'intérieur de la frontière?
    Eh bien, vous n'avez pas nécessairement besoin de spécifier zéro de remplissage, dans certains cas, vous souhaitez rembourrage pour rendre le document agréable à regarder. Et oui, cela est particulièrement vrai lorsque vous ajoutez une bordure, c'est toujours sympa d'avoir un rembourrage assurez-vous que la frontière n'est pas juste à côté du texte.
    Si vous avez une frontière, alors je ne vois pourquoi remplissage est nécessaire. Connaissez-vous des cas où vous n'avez pas spécifié de la frontière, mais vous auriez encore préfèrent utiliser un rembourrage au lieu de l'utilisation d'une marge?
    Je ne peux pas penser à une instance spécifique lorsque je l'ai fait, mais quand je fais une mise en page avec des divs j'ai de temps en temps avoir à utiliser un rembourrage pour l'espacement, mais pas souvent. J'aime laisser les éléments à l'intérieur de chaque div utilisation de son propre margin/padding pour créer un espace. J'essaie de garder les choses logiques.

    OriginalL'auteur teh_noob

  2. 2

    Pour répondre à vos 3ème question;

    La deuxième < P > comme un bloc vide, l'élément simplement ne sera pas rendu.

    Vous pouvez forcer l'élément à être rendus à vide en lui donnant de la hauteur ou de rembourrage, ou l'inclusion d'un non espace insécable &nbsp; à l'intérieur de la para. (il ya probablement plus de façons de le faire).

    Normal d'espaces (par exemple les retours à la ligne, tabulations ou des espaces) ne semble pas fonctionner à cet égard.

    Edit #2 :: Pour bien illustrer la façon dont tout cela fonctionne, enregistrer localement et de voir ce qui rend.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Page Title</title>
        <style type="text/css" media="screen">
            p { margin:10px; background-color:#ccc;}
            p.padding { padding:5px; background-color:#eec; }
            p.height { height:30px; background-color:#cee; }

        </style>
    </head>
    <body>

        <p>text</p>
        <p class="padding">i have padding</p>
        <p class="padding"></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p>5 empty paragraphs before this, only one will render. (it has padding)</p>
        <p>& nbsp;</p>
        <p>     </p>
        <p>     </p>
        <p>





        </p>
        <p>3 whitespace before me, one will render, it has &amp;nbsp;</p>
        <p class="height">im 30 px high</p>
        <p class="height"></p>
        <p></p>
        <p></p>
        <p>3 empty before me, 1 will show (it has height)</p>
        <p>text</p>
        <p>text</p>

    </body>
</html>
    Est-il vrai qu'il ne serait pas rendue si elle avait seulement marges, parce que les marges s'effondrer, mais être rendu si il avait eu un rembourrage? N'remplissage vertical (si défini) existent toujours, même lorsque le contenu est vide? Parce que si il y a remplissage je suppose que empêcherait les marges étant adjacentes.
    Normal espaces n'est pas signfificant, par exemple, w3.org/TR/2000/WD-xhtml-modularization-20000105/... dit "attaque et de fuite des espaces à l'intérieur d'un élément de bloc doit être supprimé".
    Rembourrage donner à l'élément de mise en page.
    Merci pour la confirmation. Ne vous arrive de savoir si un bloc de rembourrage, si son style a rembourrage défini, mais si elle n'avait pas d'/vide de contenu? Ou ne tout le rembourrage de disparaître quand il n'y a pas de contenu?
    Remplissage ou la hauteur de l'élément de rendu, même si vide, voir le vide p.rembourrage dans l'exemple.

    OriginalL'auteur garrow

  3. 0

    Héhé, eh bien... les navigateurs web sont différents, je dirais que ce qui va bien avec Firefox va généralement bien avec la norme, mais qui n'est pas entièrement vrai non plus.

    Selon le xhtml1-strict.dtd seulement <li/> peut être l'enfant de <ul/>. Je vous suggère de vous procurer un designer qui sait, sur les normes. Ces sont des spécifications formelles que vous pouvez vérifier votre code HTML.

    <p>Paragraph.</p>
<ul>
    <li>List item.</li>
    <li>Another list item.
    <p>List paragraph.</p> <!--illegal here-->
    </li>
</ul>

    Mais pour en revenir à votre question (qui est une douleur de répondre). Il existe de nombreux cas où vous définissez les non-zéro la marge et le remplissage. J'ai tendance à préférer la marge supplémentaire lorsque le rembourrage n'est pas nécessaire, et puis pad lorsque la marge ne fonctionne pas. Chaque situation est différente et vous aurez besoin de savoir quand on a préféré.

    Je n'entrerai pas dans les détails, parce que je pense que vous êtes sur la bonne voie. Gardez à expérimenter et je sais que vous allez obtenir. Mais gardez à l'esprit que les navigateurs web faire les choses différemment.

    Je ne suis pas sûr que l'effondrement de la marge chose, mais blanc-espace parfois compte que de la marge. Si un tas d'éléments se produisent, sans espace entre eux, c'est parfois différent de là où aucun espace blanc.

    Encore une fois, il a beaucoup de choses à prendre en donc je ne rentrerai pas dans les détails, mais vous aurez besoin de savoir au sujet de ces choses et vous obtiendrez cette connaissance en pratique.

    Le paragraphe et la liste des marges par défaut ne sont pas la même croix navigateurs, lorsque vous commencez à faire tout ce qui est mise en page que vous aurez envie de définir un ensemble de base des règles CSS pour votre page. Et si vous voulez de l'aide sur ce que les marges à définir, je vous suggère de prendre un coup d'oeil à la les canons de la construction de page.

    p { margin: 1em 0; }
ul { margin: 1em 0; }
ul > li { margin: 1em 0; }

    Les règles ci-dessus sont juste un exemple, mais ce qu'ils font, c'est qu'ils veillent à ce que les marges haut et bas pour les paragraphes et les éléments de la liste sont les mêmes, malgré navigateur. Ce genre de choses est ce qui rend votre page de la même croix navigateurs.

    Garder tester des choses et de lire l'excellent CSS blogs là-bas. Demandez de l'aide lorsque vous exécutez dans le vraiment obscure des cas limites. Ces gens ont passé beaucoup de temps à essayer de résoudre et que votre temps est mieux dépensé de l'apprentissage comment ils ont fait que de réinventer la roue.

    Je pense que mon fragment xhtml valide: je imbriqués l' <p> dans un <li>, et non pas directement dans le <ul>.
    En résumé, vous préférez utiliser des marges et pas de rembourrage.
    Non, je le dis parfois, vous devez utiliser un rembourrage, mais si vous n'avez pas besoin d'utiliser un rembourrage utilisation de la marge.

    OriginalL'auteur John Leidegren

  4. 0

    La principale chose que vous devez savoir, c'est que adjacentes (vertical) des marges simple donc si vous avez:

    p { margin: 1em 0; }
...
<p>Paragraph one</p>
<p>Paragraph two</p>

    L'espace entre eux seront cadratin (1 em pas 2em.

    Rembourrage est séparé. Si les paragraphes avait rembourrage, il serait à l'intérieur de leurs boîtes. La source de la vérité de toutes ces choses est le W3C CSS standard. Par exemple, l'effondrement des marges:

    Dans la présente norme, l'expression
    l'effondrement des marges signifie que
    attenant marges (pas de rembourrage ou
    les zones frontalières de les séparer) de deux ou
    plus de boîtes (qui peut être à côté d'un
    un autre ou imbriquée) se combinent pour former un
    seule la marge.

    En CSS2, marges horizontales jamais
    l'effondrement.

    Verticale marges peuvent s'effondrer entre
    certaines cases:

    • Deux ou plus de deux attenant à la verticale des marges de bloc de cases dans la normale
      le flux de l'effondrement. La marge résultante
      la largeur maximale de la voisine
      les largeurs des marges. Dans le cas de la négative
      les marges, le maximum absolu de la
      négatif attenante marges est déduit
      à partir de la valeur maximale du positif
      attenant à la marge. Si il n'y a pas
      des marges positives, le maximum absolu
      de l'négatif attenante marges
      déduit à partir de zéro.
    • Verticale marges entre flottait boîte et toute autre zone n'
      l'effondrement.
    • Marges de absolument et relativement placé des boîtes de ne pas
      l'effondrement.

    Veuillez consulter les exemples de la marge,
    rembourrage, et les frontières pour un
    illustration de l'effondrement des marges.

    Les frontières sont un peu différentes, en particulier dans tables où ils peuvent s'effondrer les uns dans les autres ou non en fonction du CSS.

    Maintenant, l'histoire ne s'arrête pas là bien sûr. Les navigateurs peuvent varier sur la façon de calculer les combinaisons de largeur, les marges, les frontières et le rembourrage mais c'est largement diminuée par forcer les navigateurs en mode standard (avec un DOCTYPE) et un grand sujet en lui-même (qu'est ce que vous faites pour minimiser ces sortes de problèmes).

    Le fait que les marges de fusion et de remplissage ne doit me dire quelque chose à propos de ce qu'ils sont utiles pour l', mais je ne sais pas quoi. Est-il possible (sauvage supposition de ma part) que la norme si il est un, est d'avoir très faible mais non nulle (c'est à dire d'un pixel) rembourrage, et efficaces (par exemple, 6 ou 12 points) les marges?
    J'avais déjà cité de la norme, donc je sorte de connaître l'effet de rembourrage et de la marge. Certains effets (p. ex. non-zéro de l'espacement entre les paragraphes) peut être effectuée soit avec, et je me demandais qui (padding ou margin doit être utilisée pour l'inter-espacement de paragraphe, avec un idéal navigateur qui respecte les standards.

    OriginalL'auteur cletus