What is the trick to vertically aligning two inline block divs with different font sizes?

Question

What is the trick to vertically aligning two inline block divs with different font sizes?

Within a single div element, there are two child divs styled as inline-block with different font sizes. This results in varying heights for each child div.

What criteria does the browser use to vertically position the left child div? Why don't they both start at the very top?

Below is the code snippet:

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

The outcome of this code is visible in the image linked below. Thank you!

https://i.sstatic.net/Zzyjc.png

html css

Answer 1

Answer №1

When text is on the same line, they share the same baseline. To align two text items to the top, there are a couple of approaches you can take.

One method is to add vertical-align: top; to each div element since they are set as 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>

Alternatively, you could utilize flexbox and apply align-items: flex-start;. This approach might be more suitable depending on your end goal, as flexbox offers great flexibility.

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

Answer 2

When text is on the same line, they share the same baseline. To align two text items to the top, there are a couple of approaches you can take.

One method is to add vertical-align: top; to each div element since they are set as 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>

Alternatively, you could utilize flexbox and apply align-items: flex-start;. This approach might be more suitable depending on your end goal, as flexbox offers great flexibility.

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

Answer 3

Answer №2

The default alignment depends on the baseline of the text content.

Link to Image

To achieve a similar layout, you can use flexbox with the following CSS properties: "display:flex; align-items: baseline;" on the parent element.

Answer 4

The default alignment depends on the baseline of the text content.

Link to Image

To achieve a similar layout, you can use flexbox with the following CSS properties: "display:flex; align-items: baseline;" on the parent element.

Answer 5

Answer №3

Your current issue revolves around adjusting the line-height.

To resolve this, align your smaller text to the top and decrease the line height of the larger font.

Here's the anticipated result:

https://i.sstatic.net/h9SFv.png

Sample code snippet for reference:

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

If you need assistance calculating the appropriate line height relative to font size for vertical alignment using scss, refer to this resource:

Answer 6

Your current issue revolves around adjusting the line-height.

To resolve this, align your smaller text to the top and decrease the line height of the larger font.

Here's the anticipated result:

https://i.sstatic.net/h9SFv.png

Sample code snippet for reference:

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

If you need assistance calculating the appropriate line height relative to font size for vertical alignment using scss, refer to this resource:

Answer 7

Answer №4

The uniform font size of the text is the reason why they appear consistent in size, which should resolve your problem.

Answer 8

The uniform font size of the text is the reason why they appear consistent in size, which should resolve your problem.

What is the trick to vertically aligning two inline block divs with different font sizes?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the method to activate/deactivate a button depending on a specified input value?

Activate a change or response when the input value in Javascript is altered

Link the ng-model to an asynchronous function for fetching and updating data

Using Bootstrap 3 with ResponsiveSlides.js

The background-repeat property in CSS appears to cease functioning when the container becomes too wide

Three divs are set in place, with two of them of fixed width while the third div is

I am unable to utilize folder paths in CSS within my React application

Launching Stealthy Slider

I am unable to determine if I have already selected a List Item

Is there a way to make a sass file universally accessible without having to import it into every file and causing an increase in bundle size?

`NodeJS Compared to Static HTML`

Modifying the file name during the download process using AngularJS

What is the best way to hide only the rows in a table when it is clicked using JavaScript?

"Utilize jQuery to prevent the default action, perform a specific task, and

Animated Content Sliding out Smoothly from Right to Left Using jQuery

Adding a subtle gradient to the image, just ahead of the SVG

Eliminate the flickering effect on the dropdown menu

The code snippet $(this).nextAll("#...").eq(0).text("***") isn't functioning as expected

Unusual spacing problem detected on iPad device

Headers with a 3 pixel stroke applied