CSS Height and Width
The CSS Properties height and width are used to set height and width of an element.
CSS height and width are exactly what they sound like. The height property sets the height of an element and the width property sets the width of an element
The CSS Properties height and width do not include padding, borders or margins.
Values of CSS height and width
The height and width properties can take the following values:
- auto:- This is the default value, In this case the browser calculates the height and width.
- length:- Specifies the height and width in px, cm etc.
- %:- Specifies the height and width in percentage.
- Initial:- Automatically sets the height and width to its default value.
- Inherit:- The value of height and width will be inherited from its parent value.
CSS height and width Example
Now let’s write a code to set the height and width of a p element.
<!DOCTYPE html>
<html>
<head>
<style>
p {
height: 200px;
width: 600px;
background-color: lightgrey;
}
</style>
</head>
<body>
<h1>Let's set the height and width of an p element</h1>
<p>This paragraph has a height of 200px and a width of 600px.</p>
</body>
</html>
Set max-width of an element
max-width:- It is used to the maximum width of an element. You can see it’s effects by resizing the browser.
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>max-width of element.</h2>
<div>This div element has a 100px height and a max-width of 500px.</div>
<h3>Resize the browser window to see the change.</h3>
</body>
</html>
Similarly, you can add the min-width of an element.
CSS Height and Width
