how to make a font-size increase go downwards instead of upwards

user_14917411 0
Viewed 32

I have the following html/css code, where I am trying to make the b bigger than the other two letters:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        p {
            display: inline;
        }
    </style>
</head>
<body>
    <p style="font-size: 20px">a</p>
    <p style="font-size: 30px">b</p>
    <p style="font-size: 20px">c</p>

</body>
</html>

However, I want all the letters to "start at the top" and the b to "increase its size downwards" as shown in the attached image, rather than all letters "starting at the bottom" and the b "increasing its size upwards" as in the code. Would anyone know how to do this? enter image description here

font-size css html
1 Answers

You should get the desired affect if you give the body element, or second p element a style of vertical-align: top; so that it is aligned to the top and extends down instead of being aligned at the bottom and extending up.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        p {
            display: inline;
        }
    </style>
</head>
<body>
    <p style="font-size: 20px">a</p>
    <p style="font-size: 30px;vertical-align: top;">b</p>
    <p style="font-size: 20px">c</p>

</body>
</html>

user_62647830
Related