CSS Dimension Properties

The CSS Dimension properties allow you to control the height and width of elements. Additionally, they enable you to increase line spacing.

All CSS Dimension Properties

Property	Description
height	Sets the height of an element.
line-height	Sets the line height.
max-height	Sets the maximum height of an element.
max-width	Sets the maximum width of an element.
min-height	Sets the minimum height of an element.
min-width	Sets the minimum width of an element.
width	Sets the width of an element.

More Examples

Setting Element Height

This example demonstrates how to set the height of different elements.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Webcode101(webcode101.com)</title> 
<style>
img.normal {
    height: auto;
}
img.big {
    height: 120px;
}
p.ex {
    height: 100px;
    width: 100px;
}
</style>
</head>

<body>
<img class="normal" src="logocss.gif" width="95" height="84"><br>
<img class="big" src="logocss.gif" width="95" height="84">
<p class="ex">This paragraph's height and width are 100px.</p>
<p>This is some text in a paragraph. This is some text in a paragraph.
This is some text in a paragraph. This is some text in a paragraph.
This is some text in a paragraph. This is some text in a paragraph.</p>
</body>
</html>

Setting Image Height Using Percentages

This example demonstrates how to set the height of elements using percentage values.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Webcode101(webcode101.com)</title> 
<style>
html {height: 100%;}
body {height: 100%;}
img.normal {height: auto;}
img.big {height: 50%;}
img.small {height: 10%;}
</style>
</head>

<body>
<img class="normal" src="logocss.gif" width="95" height="84"><br>
<img class="big" src="logocss.gif" width="95" height="84"><br>
<img class="small" src="logocss.gif" width="95" height="84">
</body>
</html>

Setting Element Width Using Pixels

This example demonstrates how to set the width of elements using pixel values.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Webcode101(webcode101.com)</title> 
<style>
img {width: 200px;}
</style>
</head>
<body>

<img src="logocss.gif" width="95" height="84">

</body>
</html>

Setting Maximum Element Height

This example demonstrates how to set the maximum height of elements.

<html>
<head>
<meta charset="utf-8"> 
<title>Webcode101(webcode101.com)</title> 
<style type="text/css">
p {
    max-height: 50px;
    background-color: yellow;
}
</style>
</head>

<body>
<p>The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px.</p>
</body>
</html>

Setting Maximum Element Width Using Percentages

This example demonstrates how to set the maximum width of elements using percentage values.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Webcode101(webcode101.com)</title> 
<style>
p {
    max-width: 20%;
    background-color: yellow;
}
</style>
</head>
<body>

<p>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</p>

</body>
</html>

Setting Minimum Element Height

This example demonstrates how to set the minimum height of elements.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Webcode101(webcode101.com)</title> 
<style>
p {
    min-height: 100px;
    background-color: yellow;
}
</style>
</head>

<body>
<p>The minimum height of this paragraph is set to 100px.</p>
</body>
</html>

Setting Minimum Element Width Using Pixels

This example demonstrates how to set the minimum width of elements using pixel values.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Webcode101(webcode101.com)</title> 
<style>
p {
    min-width: 150px;
    background-color: yellow;
}
</style>
</head>

<body>
<p>The minimum width of this paragraph is set to 150px.</p>
</body>
</html>