CSS Width

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.

CSS Width Example: width in px

<!DOCTYPE html>
<html>
<head>
<style>
img.normal {
    width: auto;
}
img.big {
    width: 150px;
}
p.ex {
    height: 150px;
    width: 150px;
}
</style>
</head>
<body>
<img class="normal" src="good-morning.jpg" width="95" height="84"><br>
<img class="big" src="good-morning.jpg" width="95" height="84">
<p class="ex">The height and width of this paragraph is 150px.</p>
<p>This is a paragraph.</p>
</body>
</html>

Test it Now

Output:

The height and width of this paragraph is 150px.

This is a paragraph.

CSS Width Example: width in %

The percent width is a measurement unit for the containing block. It is great for images.

<!DOCTYPE html>
<html>
<head>
<style>
img.normal {
    width: auto;
}
img.big {
    width: 50%;
}
img.small {
    width: 10%;
}
</style>
</head>
<body>
<img class="normal" src="good-morning.jpg" width="95" height="84"><br>
<img class="big" src="good-morning.jpg" width="95" height="84"><br>
<img class="small" src="good-morning.jpg" width="95" height="84">
</body>
</html>

Test it Now

Output:

Note: You can also use the "min-width" and "max-width" property to control the size of image.

Next TopicCSS Word Wrap

← prev next →

CSS Tutorial

CSS Properties

CSS Advance

CSS Design

Interview Questions

CSS Width

CSS width values

CSS Width Example: width in px

CSS Width Example: width in %

Note: You can also use the "min-width" and "max-width" property to control the size of image.