web-dev-qa-db-fra.com

Rembourrage pour éléments en ligne

Je lis un livre sur les bases de CSS. Le livre affirme qu'un élément en ligne possède des propriétés de remplissage complètes, mais pas de propriétés margin-top/bottom, mais uniquement margin-left/right.

Ma première question est la suivante: où puis-je trouver cela comme déclaration officielle? J'ai trouvé ici que si margin-top/bottom est défini sur auto, il est défini sur 0. Mais n'est-ce pas différent de dire que margin-top/bottom ne s'applique pas aux éléments en-ligne?

Ma deuxième question est la suivante: un élément en ligne possède-t-il vraiment des propriétés de remplissage complètes? J'ai essayé l'exemple suivant:

 enter image description here 

<!DOCTYPE html>
<html>
  <head> </head>

  <body>
    <div style="margin: 20px; border: solid 20px;background: red;">
      <p style="margin:0">
        test test test test test test test test test test test test test test
        test test test test test test test test test test

        <strong style="padding:20px;background-color:yellow">hello</strong>
        test test test test
      </p>
    </div>
  </body>
</html>

Maintenant, cela montre que le remplissage fonctionne réellement, mais pour une raison quelconque, padding-top et padding-bottom n'a aucun effet sur le texte environnant. Pourquoi donc? Est-ce mentionné quelque part dans les normes W3?

cssw3c
4
Adam

Il est affirmé dans le livre qu'un élément en ligne a un remplissage complet propriétés, mais pas de propriétés margin-top/button, uniquement margin-left/right Propriétés.

Ma première question est la suivante: où puis-je trouver cela comme déclaration officielle?

Vous ne le ferez pas, car ce n'est pas tout à fait vrai. Dans le modèle box , il est indiqué que pour margin-top et margin-bottom:

Ces propriétés n'ont aucun effet sur les éléments en ligne non remplacés.

Mais "pas d'effet" ne signifie pas que les propriétés n'existent pas. Plus précisément, ils existent aux fins de l'héritage. Considérons cet exemple:

p { border:1px solid red }
i { vertical-align:top; }
span { margin-top: 20px; margin-bottom: 20px;  }
b { display:inline-block; }
.two { margin:inherit;  }
<p><i>Hello</i> <span>World <b class="one">my good friend</b></span></p>
<p><i>Hello</i> <span>World <b class="two">my good friend</b></span></p>

Nous pouvons voir que l'élément b avec la classe "deux" hérite des propriétés de marge supérieure et inférieure de l'élément étendu inline, non remplacé, et comme cet élément b est un bloc inline, les marges supérieure et inférieure entraînent une différence de présentation. . Cela serait impossible si les propriétés margin-top et bottom n'existaient pas sur la plage. 

6
Alohci

Ma première question est la suivante: où puis-je trouver cela comme déclaration officielle? J'ai trouvé ici que si margin-top/bottom est réglé sur 'auto', il est réglé sur à '0'. Mais n'est-ce pas différent de dire 'margin-top/botton do ne s'applique pas à inline-elements '?

Dans la spécification de modèle de boîte 8.1 ( http://www.w3.org/TR/REC-CSS2/box.html#propdef-margin ) "La marge Bord entoure la marge de la boîte. Si la marge a une largeur égale à 0 ( hauteur), le bord Edge est identique au bord Edge. "

10.6.1 "La propriété" height "ne s'applique pas, mais la hauteur de la boîte est donnée par la propriété" line-height "." Donc, puisque la hauteur ne s'applique pas, alors le bord-bord est identique au bord du bord.

Ma deuxième question est la suivante: un élément en ligne est-il vraiment complet? propriétés de remplissage? J'ai essayé l'exemple suivant:

Même raison que ci-dessus. "la hauteur de la boîte est donnée par la propriété 'line-height'". La hauteur de cet élément fort est définie par le line-height car il n'a aucune hauteur à référencer comme le ferait un bloc ou un élément de bloc en ligne. Je suis à peu près sûr que si vous lui donniez les propriétés inline-block, cela correspond à la hauteur d'un bloc dans le modèle.

0
Leeish

mais pour une raison quelconque, il n'a aucun effet sur le texte environnant 

Essayez de remplacer margin par padding par l'élément strong en ajoutant display:inline-block au style strong

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div style="margin: 20px;
          border: solid 20px;
          background: red;">
    <p style='margin:0'>test test test test test test test test test test test test test test test test test test test test test test test test
      <strong style="margin:20px;background-color:yellow;display:inline-block;">hello</strong>
      test test test test</p>
  </div>
</body>
</html>

0
guest271314