Tutorials
Learn web design and programming with our free video and text tutorials.
Web Designer? Design and market your own professional website with easy-to-use tools.
CSS Dimension Tutorials
CSS dimension properties allow you to control the height and width of HTML elements.
How To Set the Height of HTML Elements with CSS
The height property allows you to specify the amount of space between the top-inside padding edge and the bottom-inside padding edge of an HTML element.
The possible values that the height property can have are any length (em, px, cm, etc.) and percentage values that are supported by CSS and the auto value, with auto being the default value.
The code below shows you how to specify the height of an HTML element using a pixel value with CSS.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
div.one
{
height: 20px;
border: 1px solid #000;
margin: 10px 0;
}
div.two
{
height: 50px;
border: 1px solid #000;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="one">
This HTML element has a height of 20px.
</div>
<br />
<div class="two">
This HTML element has a height of 50px.
</div>
</body>
</html>
The code above produces the divs below.
How To Set the Width of HTML Elements with CSS
The width property allows you to specify the width of an HTML element. The width is the space from the left inside padding edge to the right inside padding edge.
The possible values that the width property can have are any length (em, px, cm, etc.) and percentage values that are supported by CSS and the auto value, with auto being the default value.
The code below shows you how to specify the width of an HTML element using a pixel value with CSS.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
div.three
{
width: 200px;
border: 1px solid #000;
margin: 10px;
padding: 10px;
}
div.four
{
width: 400px;
border: 1px solid #000;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="three">
This HTML element has a width of 200px.
</div>
<br />
<div class="four">
This HTML element has a width of 400px.
</div>
</body>
</html>
The code above produces the divs below.
How To Set the Line-Height of a Text with CSS
The line-height property allows you to set the height of a line of text with CSS.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
.five
{
line-height: 30px;
font-sizse: 15px;
}
.six
{
line-height: 15px;
font-size: 15px;
}
.seven
{
line-height: 1.5em;
font-size: 15px;
}
.eight
{
line-height: 150%;
font-size: 15px;
}
</style>
</head>
<body>
<p class="five">
This line as a line height of 30px. This line as a line height of 30px. This line as a line height of 30px.
This line as a line height of 30px. This line as a line height of 30px. This line as a line height of 30px.
This line as a line height of 30px. This line as a line height of 30px. This line as a line height of 30px.
</p>
<p class="six">
This line has a line height of 15px. This line has a line height of 15px. This line has a line height of 15px.
This line has a line height of 15px. This line has a line height of 15px. This line has a line height of 15px.
This line has a line height of 15px. This line has a line height of 15px. This line has a line height of 15px.
</p>
<p class="seven">
This line has a line a line height of 1.5em which is equivalent to a line height of 150%.
This line has a line a line height of 1.5em which is equivalent to a line height of 150%.
This line has a line a line height of 1.5em which is equivalent to a line height of 150%.
</p>
<p class="eight">
This line has a line height of 150%. This line has a line height of 150%. This line has a line height of 150%.
This line has a line height of 150%. This line has a line height of 150%. This line has a line height of 150%.
This line has a line height of 150%. This line has a line height of 150%. This line has a line height of 150%.
</p>
</body>
</html>
The code above produces the paragraphs below.
This line as a line height of 30px. This line as a line height of 30px. This line as a line height of 30px. This line as a line height of 30px. This line as a line height of 30px. This line as a line height of 30px. This line as a line height of 30px. This line as a line height of 30px. This line as a line height of 30px.
This line has a line height of 15px. This line has a line height of 15px. This line has a line height of 15px. This line has a line height of 15px. This line has a line height of 15px. This line has a line height of 15px. This line has a line height of 15px. This line has a line height of 15px. This line has a line height of 15px.
This line has a line a line height of 1.5em which is equivalent to a line height of 150%. This line has a line a line height of 1.5em which is equivalent to a line height of 150%. This line has a line a line height of 1.5em which is equivalent to a line height of 150%.
This line has a line height of 150%. This line has a line height of 150%. This line has a line height of 150%. This line has a line height of 150%. This line has a line height of 150%. This line has a line height of 150%. This line has a line height of 150%. This line has a line height of 150%. This line has a line height of 150%.
How To Set Height and Width of Images with CSS
The possible values that can be used for the height and width of an image are any length (em, px, cm, etc.) and percentage values that are supported by CSS and the auto value, with auto being the default value.
The image that is used has a height of 80px and a width of 80px.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
img.nine
{
height: auto;
width: auto;
}
img.ten
{
height: 150px;
width: 150px;
}
img.eleven
{
height: 75px;
width: 300px;
}
</style>
</head>
<body>
<p>
<img class="nine" src="image.jpg" width="80px" height="80px" alt="some text" />
</p>
<p>
<img class="ten" src="image.jpg" width="80px" height="80px" alt="some text" />
</p>
<p>
<img class="eleven" src="image.jpg" width="80px" height="80px" alt="some text" />
</p>
</body>
</html>
The code above produces the 3 images below.
