CSS Height And Width CSS | Course

The properties of height and width are used to set an element's height and width. The properties of height and width not include padding, borders or borders.

It sets the area's height / width within the padding, border and the element margin.

CSS Height & Width Value

The properties of height and width may be as follows:

auto - It's the standard. The browser determines the height and width.
length - Sets the width / height in px, cm, etc ...
% - Sets the height / width of the containing block by per cent
initial - Sets the height/width to its default value
inherit - The height/width will be inherited from its parent value

Example:


<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 100px;
width: 50%;
background-color: Teal;
}
</style>
</head>
<body>
<h2>Set an element's height and width</h2>
<p>The height of this div element is 100px and the width is 50%.:</p>
<div></div>
</body>
</html>

Output:

Set an element's height and width

The height of this div element is 100px and the width is 50%.:

The maximum width of an element is set by the max-width property. The maximum width is indicated in values of length such as px, cm, etc. Or in percent of (percent) or set to none of the containing blocks (default ; means that maximum width is not in place).

The <div> problem occurs when the browser window is smaller than the element width (500px). A horizontal scrollbar is added to the page by the browser.

If the maximum width is used, the browser handling of small windows will be better in this situation.

Example:


<!DOCTYPE html>
<html>
<head>
<style>
div {max-width: 500px;
height: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set an element's height and width</h2>
<p>The height of this div element is 100px and the max-width of 500px is 50%:</p>
<div></div>
<p>To see the effect resize the browser window.</p>
</body>
</html>

Output:

Set an element's height and width

The height of this div element is 100px and the max-width of 500px is 50%:

To see the effect resize the browser window.

Note:The max-width value overrides the width property of the element.

What is CSS Width and Height ?

Set an element's height and width

CSS Setting max-width

Set an element's height and width

Course Reviews