CSS Width

To define the width of an element, the CSS width property is used. The width is specified for the area inside the padding, border, and margin of an element.

CSS width Values:

Value Uses
auto To calculate the width.
length To specify the width in px, cm etc.
% To specify the width of the containing block in %.
initial To specify the property to its default value.
inherit To inherit the property from its parent element.

Example 1:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 200px;
  width: 200px;
  background-color: crimson;
}
</style>
</head>
<body>
<h2>Square area</h2>
<p>Height and Width of 200px.</p>
<div></div>
</body>
</html>

Output:

Explanation:

In the above example, we are defining the width of the HTML <div> element in Pixels.

Example 2:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 200px;
  width: 50%;
  background-color: crimson;
}
</style>
</head>
<body>
<h2>Content area</h2>
<p>Width of 50%.</p>
<div></div>
</body>
</html>

Output:

Explanation:

In the above example, we are defining the width of the HTML <div> element in Percentage.

Please Share