CSS Dimension Property Tutorials

Learn how to use CSS to control the height and width of HTML elements.

How To Set the Height of a Line of Text with the line-height Property

CSS allows you to set the height of each line of text with the line-height property.

The possible values of the line-height property are listed below.

Property Values
line-height normal, number values, length values, percentage values, the initial value is normal

The example below shows you how to set the height of a line of text with the line-height property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Document Title</title> <style type="text/css"> p.one { line-height:15px; } p.two { line-height:40px; } </style> </head> <body> <p class="one"> This line of text has a line-height of 15 pixels. This line of text has a line-height of 15 pixels. This line of text has a line-height of 15 pixels. This line of text has a line-height of 15 pixels. This line of text has a line-height of 15 pixels. This line of text has a line-height of 15 pixels. This line of text has a line-height of 15 pixels. This line of text has a line-height of 15 pixels. This line of text has a line-height of 15 pixels. This line of text has a line-height of 15 pixels. This line of text has a line-height of 15 pixels. This line of text has a line-height of 15 pixels. This line of text has a line-height of 15 pixels. This line of text has a line-height of 15 pixels. </p> <p class="two"> This line of text has a line-height of 40 pixels. This line of text has a line-height of 40 pixels. This line of text has a line-height of 40 pixels. This line of text has a line-height of 40 pixels. This line of text has a line-height of 40 pixels. This line of text has a line-height of 40 pixels. This line of text has a line-height of 40 pixels. This line of text has a line-height of 40 pixels. This line of text has a line-height of 40 pixels. This line of text has a line-height of 40 pixels. This line of text has a line-height of 40 pixels. This line of text has a line-height of 40 pixels. This line of text has a line-height of 40 pixels. This line of text has a line-height of 40 pixels. </p> </body> </html>

The code above produces the content below.

This line of text has a line-height of 15 pixels. This line of text has a line-height of 15 pixels. This line of text has a line-height of 15 pixels. This line of text has a line-height of 15 pixels. This line of text has a line-height of 15 pixels. This line of text has a line-height of 15 pixels. This line of text has a line-height of 15 pixels. This line of text has a line-height of 15 pixels. This line of text has a line-height of 15 pixels. This line of text has a line-height of 15 pixels. This line of text has a line-height of 15 pixels. This line of text has a line-height of 15 pixels. This line of text has a line-height of 15 pixels. This line of text has a line-height of 15 pixels.

This line of text has a line-height of 40 pixels. This line of text has a line-height of 40 pixels. This line of text has a line-height of 40 pixels. This line of text has a line-height of 40 pixels. This line of text has a line-height of 40 pixels. This line of text has a line-height of 40 pixels. This line of text has a line-height of 40 pixels. This line of text has a line-height of 40 pixels. This line of text has a line-height of 40 pixels. This line of text has a line-height of 40 pixels. This line of text has a line-height of 40 pixels. This line of text has a line-height of 40 pixels. This line of text has a line-height of 40 pixels. This line of text has a line-height of 40 pixels.

How To Set the Width of Elements with the width Property

CSS allows you to specify the width of an HTML element with the use of the width property. The width of the element is the space between both the left inside padding edge to the right inside padding edge.

The possible values of the width property are listed below.

Property Values
width length values, percentage values, auto, the initial value is auto

The example below shows you how to set the width of div elements.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Document Title</title> <style type="text/css"> div.one { width:200px; margin:5px; border:1px solid black; } div.two { width:600px; margin:5px; border:1px solid black; } </style> </head> <body> <div class="one"> This div element has a width of 200 pixels. This div element has a width of 200 pixels. This div element has a width of 200 pixels. This div element has a width of 200 pixels. This div element has a width of 200 pixels. This div element has a width of 200 pixels. This div element has a width of 200 pixels. This div element has a width of 200 pixels. This div element has a width of 200 pixels. This div element has a width of 200 pixels. This div element has a width of 200 pixels. </div> <div class="two"> This div element has a width of 600 pixels. This div element has a width of 600 pixels. This div element has a width of 600 pixels. This div element has a width of 600 pixels. This div element has a width of 600 pixels. This div element has a width of 600 pixels. This div element has a width of 600 pixels. This div element has a width of 600 pixels. This div element has a width of 600 pixels. This div element has a width of 600 pixels. This div element has a width of 600 pixels. </div> </body> </html>

The code above produces the content below.

This div element has a width of 200 pixels. This div element has a width of 200 pixels. This div element has a width of 200 pixels. This div element has a width of 200 pixels. This div element has a width of 200 pixels. This div element has a width of 200 pixels. This div element has a width of 200 pixels. This div element has a width of 200 pixels. This div element has a width of 200 pixels. This div element has a width of 200 pixels. This div element has a width of 200 pixels.
This div element has a width of 600 pixels. This div element has a width of 600 pixels. This div element has a width of 600 pixels. This div element has a width of 600 pixels. This div element has a width of 600 pixels. This div element has a width of 600 pixels. This div element has a width of 600 pixels. This div element has a width of 600 pixels. This div element has a width of 600 pixels. This div element has a width of 600 pixels. This div element has a width of 600 pixels.

How To Set the Height of Elements with the height Property

CSS allows you to specify the height of an HTML element with the use of the height property. The height of the element is the space between both the top inside padding edge to the bottom inside padding edge.

The possible values of the height property are listed below.

Property Values
height length values, percentage values, auto, the initial value is auto

The example below shows you how to set the height of div elements.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Document Title</title> <style type="text/css"> div.one { height:15px; margin:5px; border:1px solid black; } div.two { height:100px; margin:5px; border:1px solid black; } </style> </head> <body> <div class="one"> This div element has a height of 15 pixels. </div> <div class="two"> This div element has a height of 100 pixels. </div> </body> </html>

The code above produces the content below.

This div element has a height of 15 pixels.
This div element has a height of 100 pixels.