CSS Height and Width
An element's height and width are set with the CSS height and width properties.
Example
Here the element is 70 pixels high and 100% wide.
Prompt
An HTML page that shows an element with a set height and a percentage width.
In an internal
<style> block, give a <div> a height of 70px, a width of 100%, and a background color so its size is visible. Put text inside.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
height: 70px;
width: 100%;
background-color: powderblue;
}
</style>
</head>
<body>
<div>This element has a height of 70 pixels and a width of 100%.</div>
</body>
</html>
CSS Set height and width
When you size an element with height and width, padding, borders, and margins are left out. What these properties measure is the area inside the padding, border, and margin.
CSS height and width Values
Five kinds of values are accepted by height and width:
auto— the browser calculates the size, and this is the default.- a length — a size given in
px,cm,em, and so on. - a percent — a size relative to the containing block.
initial— returns the size to its default value.inherit— copies the size from the parent element.
CSS height and width Examples
Note: Padding, borders, and margins stay outside the size that height and width define, since these properties cover only the area inside them.
Height 200px, width 50%
At 200px tall, this div takes up half the width of its container.
Prompt
An HTML page that sets a fixed height and a percentage width on an element.
In an internal
<style> block, give a <div> a height of 200px, a width of 50%, and a powderblue background. Put text inside.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
</style>
</head>
<body>
<div>This element has a height of 200 pixels and a width of 50%.</div>
</body>
</html>
Height 100px, width 500px
A fixed size this time: 100px tall by 500px wide.
Prompt
An HTML page that sets a fixed height and a fixed pixel width on an element.
In an internal
<style> block, give a <div> a height of 100px, a width of 500px, and a powderblue background. Put text inside.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
</style>
</head>
<body>
<div>This element has a height of 100 pixels and a width of 500 pixels.</div>
</body>
</html>