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

Question

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.

Could you show exactly what result you require. Is it that the visible top of the largest character ((in terms of topmost visible point) in each size is at the same level as the visible top of the largest character in the other size? — A Haworth, Aug 05 '23 at 07:30
Hi @AHaworth, I just want to know why they are place as it is now. And if I want to vertically align them at the top, how can I do it? — Robin Sun, Aug 05 '23 at 07:57
Thanks, I think I’d understand better if you could give a picture of exactly what you mean by vertically align at the top. Do you mean for the A and the B to have the same baseline, or for the visible top of both to be at the same level or for the characters to have no visible alignment but to be aligned at their top as in the answer from @davidleininger? — A Haworth, Aug 05 '23 at 08:02

score 1 · Accepted Answer · answered Aug 05 '23 at 06:56

1

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>

answered Aug 05 '23 at 06:56

davidleininger

909
4
11

1

While these methods do align to the top in the CSS sense, they don’t align them to the top visually in that the gap above the big B is much larger than the gap above the smaller A. Need to know exactly what result the asker is requiring. – A Haworth Aug 05 '23 at 07:26
@AHaworth, I'm not sure how you got that from the question. The question was "why don't they start from the very top?" Both of these examples do that. If what you're saying is the desired result, then you could just add some `margin-top` to the smaller AAA and it would line up, or you could adjust the `line-height`. – davidleininger Aug 05 '23 at 07:42
1

The question I have is what is meant by the very top. Is it where the first visible bit of the character is? Or is it where CSS thinks it is ? – A Haworth Aug 05 '23 at 07:51
1

The link given by @damionvishall is useful to understand the difference. https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align – A Haworth Aug 05 '23 at 07:55
It works just fine the way I have it, and if @RobinSun needs to align to the top, `margin-top` or `line-height` will do the trick. – davidleininger Aug 05 '23 at 07:55
@AHaworth I understand how those work and what the differences are. The question wasn't clear, and I made an assumption. This will still get the OP there or close enough to finish with the already mentioned properties. – davidleininger Aug 05 '23 at 07:57

Christian Ariel Carapezza · Answer 2 · 2023-08-05T06:57:43.027

-1

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)

edited Aug 05 '23 at 06:57

answered Aug 05 '23 at 06:53

Christian Ariel Carapezza

1
2

score -2 · Answer 3 · answered Aug 05 '23 at 07:19

The issue you're facing is line-height.

vertical align your smaller text to top, and reduce the line height of the bigger font.

Result:

code:

<div style="width: 300px; vertical-align:top;">
    <div style="display: inline-block; font-size: 16px; vertical-align:top;">AAA</div>
    <div style="display: inline-block; font-size: 88px; line-height: 60px;">BBB</div>
</div>

Resource to calculate proper line height compared to font size to vertically align your text using scss:

https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

score -3 · Answer 4 · answered Aug 05 '23 at 06:36

-3

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

answered Aug 05 '23 at 06:36

Lucifer

81
5

1

That doesn't make sense. Is that what ChatGPT gave you? – Tim R Aug 05 '23 at 06:38
you can try it by your self and this general issue if can look closely the code and its not from GPT – Lucifer Aug 05 '23 at 06:47
Try what? How does the different font size make them the same font size? What issue does this fix? – Tim R Aug 05 '23 at 07:01
2

Oh, after seeing your other answer where you made the text have the same font size, it becomes clear that you omitted punctuation from this answer that looks like a single statement. However, the alignment is not "because the font size". Regardless of the font size, the text has the same baseline alignment. – Tim R Aug 05 '23 at 07:10
This answer was confusing because of grammar and the lack of punctuation. However, I realized that you were trying to describe the effect of the text baseline. I feel that I was too harsh and unfriendly towards someone who was trying to help, so I'd like to apologize for that. I don't want my actions to discourage others from trying to help. – Tim R Aug 07 '23 at 23:06

score -3 · Answer 5 · answered Aug 05 '23 at 06:57

-3

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

answered Aug 05 '23 at 06:57

Lucifer

81
5

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

5 Answers5