Home/ Questions/Q 7877035
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T03:16:02+00:00

i cant get a smaller (superscript) inline element to align with another inline element.

  • 0

i cant get a smaller (superscript) inline element to align with another inline element.

Basically the em element (that contains the words ‘USD’) should align with the inline text (that contains the words ABC), so both the tops of the words are on the same line.

For me with my code below, the words USD are half way up even though i set the line height to 35px;

Any ideas what i am doing wrong?

Thanks,

Chris

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.plan-types-pricing
{
    font-size: 35px;
    line-height: 35px;
}

.plan-types-pricing strong
{
    display: block;
}

.plan-types-pricing em
{
    font-size:12px;
    vertical-align: top;
    line-height: 35px;
}

.plan-types-pricing small
{
    font-size: 12px;
    vertical-align: baseline;
}

</style>
</head>
<body>
    <span class="plan-types-pricing">
        <strong>Starting at</strong>
        <em>USD</em>
        ABC
        <small>/month</small>
    </span>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The line-height of .plan-types-pricing em should be desired height – font size (35 – 12 = 23)
    So set the line-height of em to 23px.

    .plan-types-pricing em
{
    line-height: 23px;
    font-size: 12px;
    vertical-align: top;
}
    • 0