Question 223519 in Html Question posted in
Some basic documentation can be found here.

Html – How two inline block div are vertical aligned when they have differnt font size?

There is one div with two child div, and make them as inline-block. The two child div have different font size. So, their height are quite different.

What is browser based on to put left child in this position vertiaclly? Why don’t they all starting from the very top?

Here is the code.

<div>
    <h4>Got Some Ideas for us?</h4>
    <div style="display: inline-block; width: 300px;background-color: rgb(80, 133, 130);font-size: 16px;">
        <span>AAA</span>
        
    </div>
    <div style="display: inline-block;width: 300px;background-color: rgb(154, 16, 99);font-size: 88px;">
        
        <span>BBB</span>
    </div>
</div>

Here is the result. Thanks.

enter image description here

Tags:

4

Answers


  1. 0

    it is because the font size of text make them same font size so that will fix you issue

    Login or Signup to reply.
  2. 0

    The default alignment is based on the baselines of the texts.

    Image

    You can obtain similar behaviour usign flexbox ("display:flex; align-items: baseline" on the parent)

    Login or Signup to reply.
  3. 0

    Text on the same line share the same baseline. There are two ways that you could handle aligning the two text items to the top.

    First, you can apply vertical-align: top; to each of the divs. This works because the items are display: inline-block;.

    .small {
  display: inline-block;
  width: 300px;
  background-color: rgb(80, 133, 130);
  font-size: 16px;
  vertical-align: top;
}

.large {
  display: inline-block;
  width: 300px;
  background-color: rgb(154, 16, 99);
  font-size: 88px;
  vertical-align: top;
}
    <div>
  <h4>Got Some Ideas for us?</h4>
    <div class="small">
      <span>AAA</span>

    </div>
    <div class="large">

      <span>BBB</span>
    </div>
</div>

    The other way would be to use flexbox, and align-items: flex-start;. This is probably the way that I would do it, but it all depends on the end goal. Flexbox is really powerful.

    .container {
  display: flex;
  align-items: flex-start;
}

.small {
  display: inline-block;
  width: 300px;
  background-color: rgb(80, 133, 130);
  font-size: 16px;
  vertical-align: top;
}

.large {
  display: inline-block;
  width: 300px;
  background-color: rgb(154, 16, 99);
  font-size: 88px;
  vertical-align: top;
}
    <div>
  <h4>Got Some Ideas for us?</h4>
  <div class="container">
    <div class="small">
      <span>AAA</span>

    </div>
    <div class="large">

      <span>BBB</span>
    </div>
  </div>
</div>
    Login or Signup to reply.
  4. 0

    here is your answer @Tim R its not from the chatGPT @Tim R its not from the chatGPT

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search