Line-height Property in CSS3

How to specify the line height in CSS3?

By using line-height property we can specify the line height.

<style>
        .p {
            line-height: normal;
        }

        .q {
            line-height: 50%;
        }

        .r {
            line-height: 220%;
        }
</style>

<body>
    <strong>Paragraph with normal Line-height.</strong>
    <p class="p">
        Mr. Sheo Narayan is a software professional since 2000.
        Mr. Sheo Narayan is a software professional since 2000.
        Mr. Sheo Narayan is a software professional since 2000.
        Mr. Sheo Narayan is a software professional since 2000.
        Mr. Sheo Narayan is a software professional since 2000.
    </p>

    <strong>Paragraph with '50%' Line-height.</strong>
    <p class="q">
        Mr. Sheo Narayan is a software professional since 2000.
        Mr. Sheo Narayan is a software professional since 2000.
        Mr. Sheo Narayan is a software professional since 2000.
        Mr. Sheo Narayan is a software professional since 2000.
        Mr. Sheo Narayan is a software professional since 2000.
    </p>
    <strong>Paragraph with '180%' Line-height.</strong>
    <p class="r">
        Mr. Sheo Narayan is a software professional since 2000.
        Mr. Sheo Narayan is a software professional since 2000.
        Mr. Sheo Narayan is a software professional since 2000.
        Mr. Sheo Narayan is a software professional since 2000.
        Mr. Sheo Narayan is a software professional since 2000.
    </p>
    <strong>Normal Line height between the two lines is "110% to 120%"</strong>
</body>

In the above code snippet we have given line-height property to the .class (.p, .q,.r)selectors. The line-height property with value "normal" gives the normal height between the lines in the <p> element, the line-height property with value "50%" gives the 50% height between the lines in the <p> element, the line-height property with value "180%" gives the 180% height between the lines in the <p> element. The default height between the lines in the browser is "110%" to "120%".

OUTPUT

Views: 3209 | Post Order: 80

CSS3 > Texts

Line-height Property in CSS3

How to specify the line height in CSS3?

Related Posts

Utility Tools