recherche

Maison  >  Questions et réponses  >  le corps du texte

Pourquoi verticalalign:textbottom et verticalalign:bottom ont-ils le même effet ?

La position de la ligne de base de la boîte de ligne est affectée par tous les éléments de la ligne. 

      .short-box {
        width: 30px;
        height: 30px;
        background-color: pink;
        display: inline-block;
      }
      .box {
        background-color: bisque;
        margin-bottom: 10px;
      }
      .tall-box {
        width: 30px;
        height: 100px;
        background-color: pink;
        display: inline-block;
      }
      .text-bottom {
        vertical-align: text-bottom;
      }
      .text-top {
        vertical-align: text-top;
      }

      .bottom {
        vertical-align: bottom;
      }
      .top {
        vertical-align: top;
      }

  <body>
    <div class="box">
      x
      <span class="tall-box text-bottom"></span>
      <span class="short-box"></span>
    </div>
    <div class="box">
      x
      <span class="tall-box text-top"></span>
      <span class="short-box"></span>
    </div>
    <div class="box">
      x
      <span class="tall-box bottom"></span>
      <span class="short-box"></span>
    </div>

    <div class="box">
      x
      <span class="tall-box top"></span>
      <span class="short-box"></span>
    </div>
  </body>
</html>

Pourquoi la première case et la troisième case ont le même effet, mais la deuxième case et la quatrième case ont des effets différents. Comment la propriété d’alignement vertical modifie-t-elle la ligne de base d’une zone de ligne ?

P粉633309801P粉633309801264 Il y a quelques jours479

répondre à tous(1)je répondrai

  • P粉674757114

    P粉6747571142024-04-03 00:32:45

    En bref, parce que la zone courte dépasse au-dessus de la zone de contenu parent, mais ne dépasse pas en dessous de la zone de contenu parent.

    Voici l'image avec les cases et lignes pertinentes ajoutées :

    Dans chaque cas, le rectangle vert indique l'emplacement de la zone de ligne, le rectangle bleu indique l'emplacement de la zone de contenu parent et la ligne rouge indique l'emplacement de la ligne de base.

    Maintenant, nous pouvons voir que dans les cas un et trois, la zone haute est alignée avec text-bottom 和 bottom respectivement, et le bas de la zone de contenu parent et le bas de la zone de ligne coïncident. Par conséquent, l’alignement de chacun aboutit au même arrangement.

    Dans les cas deux et quatre, la zone haute est alignée avec text-top 和 top respectivement, et le haut de la zone de contenu parent et le haut de la zone de ligne ne coïncident pas, donc leurs dispositions ne sont pas les mêmes.

    répondre
    0
  • Annulerrépondre