- CSS line-height Property
- Syntax
- Example of the line-height property:
- Result
- Example of the line-height property with the «length» value:
- Example of the line-height property with the «percentage» value:
- Example of the line-height property with all the values:
- Line-height property for different purposes
- Values
- Browser support
- How to Style a Horizontal Line
- Change the size and position of a horizontal rule
- Example of changing the width and position of a horizontal rule:
- Result
- Example of changing the height and background color of the horizontal rule:
- Example of adding a horizontal rule without a border:
- Example of adding a horizontal line with the border-top property:
- Additional style for horizontal lines
- Example of adding different styles to horizontal lines:
- Use a background image as a horizontal rule
- Example of adding a background image as a horizontal line:
- How to add attributes to a horizontal line across the page?
CSS line-height Property
The line-height property defines the line-height. There are three situations:
- On block level elements, the line-height property specifies the minimal line-height of line boxes in the element.
- On non-replaced inline elements, the line-height property specifies the height which is used in the calculation of the line box height.
- On replaced inline elements just like buttons or other input elements, the line-height property does not affect.
The line-height property sets the leading of lines of a text. If the line-height value is greater than the font-size value of an element, the difference will be the leading of text.
The line-height property has no effect when applying to inline elements: such as images, buttons, etc.
| Initial Value | normal |
| Applies to | List items. |
| Inherited | Yes. |
| Animatable | Yes. Height of the lines is animatable. |
| Version | CSS1 |
| DOM Syntax | object.style.lineHeight = «40px»; |
Syntax
line-height: normal | number | length | initial | inherit;Example of the line-height property:
html> html> head> title>Title of the document title> style> div < line-height: normal; > style> head> body> h2>Line-height property example h2> h3>line-height: normal (default) h3> div>This is a paragraph with a standard line-height. br> The standard line height in most browsers is about 110% to 120%. div> body> html>Result
Example of the line-height property with the «length» value:
html> html> head> title>Title of the document title> style> div < line-height: 10px; > style> head> body> h2>Line-height property example h2> h3>line-height: 10px h3> div>This is a paragraph with a specified line-height. br> The line height here is set to 10 pixels. div> body> html>Example of the line-height property with the «percentage» value:
html> html> head> title>Title of the document title> style> div < line-height: 200%; > style> head> body> h2>Line-height property example h2> h2>line-height: 200% h2> div>This is a paragraph with a bigger line-height. br> The line height here is set to 200%. div> body> html>Example of the line-height property with all the values:
html> html> head> title>Title of the document title> style> div.a < line-height: 1; > div.b < line-height: 50px; > div.c < line-height: 0.5cm; > div.d < line-height: 1cm; > div.e < line-height: 200%; > div.f < line-height: normal; > style> head> body> h2>Line-height property example h2> h3>line-height: 1 h3> div class="a">This is a paragraph with a specified line-height. br> The line height here is set to 1. div> h3>line-height: 50px h3> div class="b">This is a paragraph with a specified line-height. br> The line height here is set to 50 pixels. div> h3>line-height: 0.5cm h3> div class="c">This is a paragraph with a specified line-height. br> The line height here is set to 0.5 centimeter. div> h3>line-height: 1cm h3> div class="d">This is a paragraph with a specified line-height. br> The line height here is set to 1 centimeter. div> h3>line-height: 200% h3> div class="e">This is a paragraph with a bigger line-height. br> The line height here is set to 200%. div> h3>line-height: normal h3> div class="f">This is a paragraph with a standard line-height. br> The standard line height in most browsers is about 110% to 120%. div> body> html>Line-height property for different purposes
The line-height property can be used for creating different interesting styles. For example, you can use the line-height property to give each line of the text a different color. Here you may use a linear-gradient () with color-stops. Or you can use this property for putting lines between texts with the help of repeating-linear-gradient().
Values
| Value | Description | Play it |
|---|---|---|
| normal | Defines a normal line height. It is the default value of this property. | Play it » |
| length | Defines a fixed line height in px, cm etc. | Play it » |
| number | Defines a number which is multiplied with the current font size to set the line height. | Play it » |
| % | Defines a line height in percent of current font size. | Play it » |
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parents element. |
Browser support
How to Style a Horizontal Line
A horizontal rule is commonly used as content or section divider. As a horizontal rule the element is used. Originally the
element was styled using attributes. Nowadays, in HTML5, the
element tells the browser that there is a paragraph-level thematic break. Let’s see how to style the
element with CSS below.
Change the size and position of a horizontal rule
The
element is styled with CSS rules instead of attributes. Change the width of the horizontal line by setting the width property and then center it using the margin property.
Example of changing the width and position of a horizontal rule:
html> html> head> title>Title of the document title> style> hr < width: 70%; margin-left: auto; margin-right: auto; > style> head> body> h1>Center Horizontal Line h1> hr /> body> html>Result
If you want to change the thickness, or height of your horizontal line, add the height property to your
style. In this case, you can also set the background-color property for the thick horizontal line.
Example of changing the height and background color of the horizontal rule:
html> html> head> title>Title of the document title> style> hr < width: 100%; height: 30px; margin-left: auto; margin-right: auto; background-color: #b7d0e2; > style> head> body> h1>Horizontal Line with Height and Background Color h1> hr /> body> html>Set the border property to «none» to remove the border of your thick horizontal line.
Example of adding a horizontal rule without a border:
html> html> head> title>Title of the document title> style> hr < width: 100%; height: 30px; margin-left: auto; margin-right: auto; background-color: #b7d0e2; border: 0 none; > style> head> body> h1>Horizontal Line with Height and Background Color h1> hr /> body> html>You can change the color of the horizontal line by setting the border-top property and defining the color. Follow the example to see an illustration of it.
Example of adding a horizontal line with the border-top property:
html> html> head> title>Title of the document title> style> hr < border-top: 5px solid #095484; > style> head> body> h1>Horizontal Line with Height and Background Color h1> hr /> body> html>Additional style for horizontal lines
Go further with horizontal lines by giving different styles to your
element’s border. Check the example code to see what stunning horizontal lines are presented.
Example of adding different styles to horizontal lines:
html> html> head> title>Title of the document title> style> .hr1 < border: 0; height: 3px; background: #095484; background-image: linear-gradient(to right, #ccc, #095484, #ccc); > .hr2 < border: 0; height: 3px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(9, 84, 132), rgba(0, 0, 0, 0)); > .hr3 < height: 15px; border: 0; box-shadow: inset 0 12px 12px -12px rgba(9, 84, 132); > .hr4 < border-top: 3px double #095484; > .hr5 < background-color: #fff; border-top: 2px dashed #095484; > .hr6 < border-top: 3px dotted #095484; > .hr7 < height: 30px; border-style: solid; border-color: #095484; border-width: 1px 0 0 0; border-radius: 20px; > .hr8 < display: block; content: ""; height: 30px; margin-top: -31px; border-style: solid; border-color: #095484; border-width: 0 0 1px 0; border-radius: 20px; > style> head> body> h3>Gradient Horizontal Line h3> hr class="hr1" /> h3>Gradient Transparent h3> hr class="hr2" /> h3>Single-direction Drop Shadow h3> hr class="hr3" /> h3>Double h3> hr class="hr4" /> h3>Dashed h3> hr class="hr5" /> h3>Dotted h3> hr class="hr6" /> h3>Rounded Corners h3> hr class="hr7" /> hr class="hr8" /> body> html>Use a background image as a horizontal rule
If you want to set an ornament or image as a horizontal rule for your website, you can add a background image to your horizontal rule with the help of the CSS background property. Also, set the height equal to the height of your image (or how much part you want from the image), and border: none, so as your image will look like as a horizontal line.
Example of adding a background image as a horizontal line:
html> html> head> title>Title of the document title> style> .hr1 < height: 25px; background: url(/uploads/media/default/0001/01/e7a97bd9b2d25886cc7b9115de83b6b28b73b90b.jpeg) no-repeat center; border: none; > .hr2 < height: 25px; background: url(/uploads/media/default/0001/01/295e26d0bdf4d635c8887a6b0f37b61d7c69c5fc.png) no-repeat center; border: none; > .hr3 < height: 25px; background: url(/uploads/media/default/0001/01/09a69b0ad1525926a508356955843cf84306fd85.png) no-repeat center; border: none; > .hr4 < height: 20px; background: url(/uploads/media/default/0001/01/12fbe0b5b3d06c7e379d646068faa12f70452638.png) no-repeat center; border: none; > .hr5 < height: 50px; background: url(/uploads/media/default/0001/01/7d5f2a204567da4df1c1d7e5017d7b510ef56619.jpeg) no-repeat center; border: none; > .hr6 < height: 70px; background: url(/uploads/media/default/0001/01/fb69fe21cc880d96b3267efaa88cd72288a77fef.png) no-repeat center; border: none; > style> head> body> h1>Horizontal Lines with Images h1> hr class="hr1" /> br /> hr class="hr2" /> br /> hr class="hr3" /> br /> hr class="hr4" /> br /> hr class="hr5" /> hr class="hr6" /> body> html>How to add attributes to a horizontal line across the page?
You can add attributes to a horizontal line in HTML by using the
tag and adding the desired attribute(s) as HTML attributes within the opening tag. Here is an example:
label="Horizontal line across the page">In this example, we have added three attributes to the
element:
- style: This attribute sets the inline style of the element. In this case, we have set the border property to create a solid black line. You can use any CSS property here to style the line as desired.
- id: This attribute sets the unique identifier for the element. This can be used to target the element with JavaScript or CSS.
- class: This attribute sets the CSS class(es) for the element. This can be used to apply common styles to multiple elements with the same class.
- aria-label: This attribute is used to provide an accessible label for the element. It is read out loud by screen readers and is helpful for users who are visually impaired.
You can add any valid HTML attribute to the
tag in this way.