The CSS dimension properties allow you to control the height and width of an element.
Try it Yourself - Examples
Set the height of elements
This example demonstrates how to set the height of different elements.
This example demonstrates how to set the height of different elements.
Example
<head>
<style type="text/css">
img.normal
{
height:auto;
}
img.big
{
height:120px;
}
p.ex
{
height:100px;
width:100px;
}
</style>
</head>
<body>
<img class="normal" src="your_image.gif" width="95" height="84" /><br />
<img class="big" src="your_image.gif" width="95" height="84" />
<p class="ex">The height and width of this paragraph is 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>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Result:
The height and width of this paragraph is 100px.
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.
Set the height of an image using percentThis example demonstrates how to set the height of an element using a percent value.
Example
<html>
<head>
<style type="text/css">
img.normal {height:auto;}
img.big {height:50%;}
img.small {height:10%;}
</style>
</head>
<body>
<img class="normal" src="your_image.gif" width="95" height="84" /><br />
<img class="big" src="your_image.gif" width="95" height="84" /><br />
<img class="small" src="your_image.gif" width="95" height="84" />
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Result:
Set the width of an element using a pixel valueThis example demonstrates how to set the width of an element using a pixel value.
Example
<html>
<head>
<style type="text/css">
img {width:200px;}
</style>
</head>
<body>
<img src="your_image.gif" width="95" height="84" />
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Result:
Set the maximum height of an elementThis example demonstrates how to set the maximum height of an element.
Example
<html>
<head>
<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.</p>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Result:
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.
Set the maximum width of an element using percentThis example demonstrates how to set the maximum width of an element using a percent value.
Example
<html>
<head>
<style type="text/css">
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>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Result:
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.
Set the minimum height of an elementThis example demonstrates how to set the minimum height of an element.
Example
<html>
<head>
<style type="text/css">
p
{
min-height:100px;
background-color:yellow;
}
</style>
</head>
<body>
<p>The minimum height of this paragraph is set to 100px.</p>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Result:
The minimum height of this paragraph is set to 100px.
Set the minimum width of an element using a pixel valueThis example demonstrates how to set the minimum width of an element using a pixel value.
Example
<html>
<head>
<style type="text/css">
p
{
min-width:150px;
background-color:yellow;
}
</style>
</head>
<body>
<p>The minimum width of this paragraph is set to 150px.</p>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Result:
The minimum width of this paragraph is set to 150px.
All CSS Dimension Properties
The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).
| Property | Description | Values | CSS |
|---|---|---|---|
| height | Sets the height of an element | auto length %inherit | 1 |
| max-height | Sets the maximum height of an element | none length %inherit | 2 |
| max-width | Sets the maximum width of an element | none length %inherit | 2 |
| min-height | Sets the minimum height of an element | length %inherit | 2 |
| min-width | Sets the minimum width of an element | length %inherit | 2 |
| width | Sets the width of an element | auto length %inherit | 1 |
