Crus4

logo

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:

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