The CSS width property is used to set the width of the content area of an element. It does not include padding borders or margins. It sets width of the area inside the padding, border, and margin of the element.
CSS width values
| Value |
Description |
| auto |
It is a default value. it is used to calculate the width. |
| length |
It is used to define the width in px, cm etc. |
| % |
It defines the width of the containing block in %. |
| initial |
It is used to set the property to its default value. |
| inherit |
It is used to inherit the property from its parent element. |
See this example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Width</title>
<style>
img.normal {
width:auto;
}
img.large {
width:130px;
}
p.paragraph {
height:130px;
width:130px;
background:#11a286;
color:#fff;
}
</style>
</head>
<body>
<img class="normal" src="https://nexladder.com/images/spituk_gustor.jpeg" width="95" height="84"><br>
<img class="big" src="https://nexladder.com/images/spituk_gustor.jpeg" width="95" height="84">
<p class="paragraph">The height and width of this paragraph is 130px.</p>
<p>This is a paragraph.</p>
</body>
</html>
