My divs are not aligned when using monospace font

div containing monospace font is not aligned with other div.
I tried many ways to force the divs to position the same, but no success.
divs

<h2>Fonts</h2>
        <div class="afont" id="Serif">
            <h3>Serif:</h3>
        </div>
        <div class="afont" id="Monospace">
            <h3>Monospace:</h3>
        </div>

.afont{
display:inline-block;
border:1px darkgray solid;
}
#Serif{
font-family:serif;
}
#Monospace{
font-family:monospace;
}

Just observing that they do have a common baseline. Perhaps that factors into it, somehow?

Try setting the margin to 0 on .afont and see what happens.

Aside

it’s not typical to see capitalized id or class names. In this particular instance it’s even more unusual since generic font families are not capitalized, either.

I tried margin: 0 as well as position: relative and top: 0px.
Any idea what’s causing the position to be different?

The solution code https://codecademy-content.s3.amazonaws.com/PRO/independent-practice-projects/website-design-system/website-design-system-solution.zip also has the same problem if the font is changed to monospace.

How can we be sure what kinds of content will not cause the divs to change position?
Had a look at Stack Overflow they suggest using table cells instead of div.
Thanks.

So I used
vertical-align: top
which solved the problem of div alignment.

1 Like