• PHP Training
    •  
  • Login/Register

    • Home >>CSS Tutorial >CSS Line Height

    CSS Line Height

    « Previous Next »

    CSS Line Height

    The CSS line height property is used to set the minimal amount of space used for line boxes, such as in text within the element.

    The number of negative values are not allowed. The differences between two lines of your content can be set by using CSS line height.

    CSS Line Height Values

    There are some CSS line height values:

    Value Description
    Normal It defines the normal line height. This is default.
    Number It specifies to set the line-height of a number that will be multiplied with the current font size.
    Length It is used to fixed the line height in px, pt, cm, etc.
    % It specifies the line height in percent of the current font size.
    Initial It fixed this property to its default value.
    Inherit It specifies that inherits this property from its parent element.

    Let's take an example of CSS Line Height:

    <!DOCTYPE html>  
<html>  
<head>  
<style>  
h4.small {  
    line-height: 75%;  
}  
h4.big {  
    line-height: 250%;  
}  
</style>  
</head>  
<body>  
<h4 class="small">  
h4 heading with a smaller line-height.<br>  
h4 heading with a smaller line-height.<br>  
h4 heading with a smaller line-height.<br>  
h4 heading with a smaller line-height.<br>  
</h4>  
<h4 class="big">  
h4 heading with a bigger line-height.<br>  
h4 heading with a bigger line-height.<br>  
h4 heading with a bigger line-height.<br>  
h4 heading with a bigger line-height.<br>  
</h4>  
</body>  
</html>
    Output:

    h4 heading with a smaller line-height.
    h4 heading with a smaller line-height.
    h4 heading with a smaller line-height.
    h4 heading with a smaller line-height.

    h4 heading with a bigger line-height.
    h4 heading with a bigger line-height.
    h4 heading with a bigger line-height.
    h4 heading with a bigger line-height.

    Let's understand another example of line height: number

    <!DOCTYPE html> 
<html> 
    <head> 
        <title>CSS line-height Property</title> 
        <style> 
            .phptpoint { 
              line-height: 2.5; 
              background:#327bc9; 
              color: white; 
            } 
        </style> 
    </head> 
    <body style = "text-align:center;"> 
        <h1 style = "color:#327bc9;"> 
            PHPTPOINT 
        </h1> 
          <h2> 
            CSS line-height Property: number
        </h2> 
          <div class="phptpoint">  
            This div has line-height: 2.5;<br> 
			Welcome to phptpoint
			</div> 
    </body> 
</html>
    Output:

    PHPTPOINT

    CSS line-height Property: number

    This div has line-height: 2.5;
    Welcome to phptpoint
    « Previous Next »

    CSS Tutorial What is CSS CSS Syntax CSS Selectors How to add CSS CSS Colors CSS Comments CSS Background CSS Border CSS Display property How do I hide an element when printing a web page CSS Float CSS Font CSS Line Height CSS Opacity property CSS Overflow CSS Padding CSS Margin property CSS Position CSS Vertical align CSS White Space CSS Width CSS Word Wrap CSS Outline CSS Visibility CSS Media Queries CSS Animation CSS Gradient CSS Transition CSS Tooltips CSS Tooltip Animation CSS Arrow CSS Flexbox CSS 2D Transforms CSS 3D Transform CSS Aural Media CSS User Interface CSS Pagination CSS Table
    No Sidebar ads