简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Q&A  >  body text

Why do verticalalign:textbottom and verticalalign:bottom have the same effect?

The position of the line box baseline is affected by all elements in the line. 

      .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>

Why the effects of the first box and the third box are the same, but the effects of the second box and the fourth box are different. How does the vertical alignment property change the baseline of a line box?

P粉633309801P粉633309801187 days ago364

reply all(1)I'll reply

  • P粉674757114

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

    In short, because the short box protrudes above the parent content box, but does not protrude below the parent content box.

    Here is the image with the relevant boxes and lines added:

    In each case, the green rectangle shows where the line box is, the blue rectangle shows where the parent content box is, and the red line shows where the baseline is.

    Now we can see that in case one and three, the tall box is aligned with text-bottom and bottom respectively, the bottom of the parent content box and the bottom of the line box coincide. Therefore, the alignment of each resolves to the same arrangement.

    In case two and four, the tall box is aligned with text-top and top respectively. The top of the parent content box and the top of the line box do not coincide, so their The layout is not the same.

    reply
    0
  • Cancelreply