CSS - line-height Property


CSS - line-height Property

  • The line-height property permits us to expand the space between lines of content. 
  • The estimation of the line-height property can be a number, a length, or a rate.

Example :

p
{     
width: 400px;
height: 100px;
border: 3px solid pink;
line-height: 30px;
}

Sample Code :

<!DOCTYPE html>
<html>
    <body>
        <p
style="width:400px; height:100px; border:1px solid pink;line-height:30px">
            Welcome To Wikitechy <br>
            Welcome To Wikitechy
        </p>
    </body>
</html>

Code Explanation:


    In CSS, Width property is used to allocate a width for an element. Here we had specified the width of a paragraph tag as 400 pixels.

    Similarly, height property defines the height of an element where we specified as 100px.

    Border property creates a border around an element. Border values 1px solid red defines the border strength,style and color respectively.

    Line height property defines the line height of an element. Here, we had specified 30 pixels as a line height.

    Here <br> is used to insert a single line break after the term “Welcome To WikiTechy”

Output:

 

    Here, the line space between the two lines “Welcome to wikitechy” and “Welcome to wikitechy” is 30 pixels as displayed in the output.

    Border around the two lines appears in pink color with solid style as displayed in the browser window.