CSS Width

width property sets the width of the content area of an element. If box-sizing is set to border-box , then the width property sets the width of the border area.

width property must specify a value within the range of values defined by the min-width and max-width properties.

Please refer to the image for the element’s width.

CSS width

Syntax

CSS allows you to set the width of an element in a variety of ways. Let’s examine all the possible syntaxes for setting the width of an element.

Length value

width: 120px; 
width: 10em; 
width: 100vh;

Percent value

width: 75%; 
width: 50%;

Keyword value

width: auto; 
width: max-content; 
width: min-content; 
width: fit-content(20em);

Global values

width: inherit; 
width: initial; 
width: revert; 
width: revert-layer; 
width: unset;

Negative values (e.g., width: -200px) are not accepted.

Applies To

Applies to all HTML elements except non-replaced inline elements, table rows, and row groups.

DOM Syntax

object.style.width = "100px";

CSS Width – Length Values

CSS allows you to set the width of an element to a specific length unit, such as pixels (px), centimeters (cm), inches (in), etc. Here’s an example of adding a width to a div element using length units:

<html> 
<head> 
<style> 
div { 
border: 1px solid black; 
margin-bottom: 5px; 
padding:10px; 
} 
div.a { 
width: 100px; 
background-color: rgb(230, 230, 203); 
} 
div.b { 
width: 5em; 
background-color: rgb(230, 230, 203); 
} 
</style> 
</head> 
<body> 
<div class="a">This div element has a width of 100px.</div> 
<div class="b">This div element has a width of 5em.</div> 
</body> 
</html>

CSS Width – Percentage Values

CSS allows you to set the height of an element as a percentage of the width of the containing element. Here’s how to add width to

Example in

element, using percentage values:

<html> 
<head> 
<style> .parent{
border: 1px solid black;
width: 400px;
background-color: rgb(230, 230, 203);
}
.child{
border: 1px solid black;
width: 50%;
background-color: rgb(76 175 80);
}
</style>
</head>

<body>
<div class="parent">
<div class="child">
<p>This div element has a 50% width of the parent.</p>
</div>
</div>
</body>
</html>

CSS Width – Auto Value

Here, the browser will automatically calculate the width based on the content. This is the default width of an element. Here’s an example of adding a width to a

element and setting it to auto:

<html> 
<head> 
<style> 
div { 
border: 1px solid black; 
margin-bottom: 5px; 
} 
div.auto { 
width: auto; 
background-color: yellow; 
} 
</style> 
</head> 
<body> 
<div class="auto">This div element has a width set as auto. </div> 
</body> 
</html>

CSS Width – max-content/min-content

This is an example of a width equal to max-content and min-content. max-content defines an inherent preferred width, while min-content defines an inherent minimum width.

<html> 
<head> 
<style> 
div { 
border: 1px solid black; 
margin-bottom: 5px; 
} 
div.c { 
width: max-content; 
background-color: bisque; 
} 
div.d { 
width: min-content; 
background-color: darkseagreen; 
} 
</style> 
</head> 
<body> 
<div class="c">This div element has a width as max-content.</div> 
<div class="d">This div element has a width of min-content.</div> 
</body> 
</html>

CSS width – fit-content

This is an example, using fit-content Value sets the width of the list:

<html> 
<head> 
<style> 
ul { 
background-color: beige; 
width: fit-content; 
padding: 1.5em; 
border: 2px solid black; 
} 
li { 
display: inline-flex; 
background-color: orange; 
border: 2px solid black; 
padding: 0.5em; 
} 
</style> 
<body> 
<ul> 
<li>Item1</li> 
<li>Item2</li> 
<li>Item3</li> 
<li>Item4</li> 
</ul> 
</body> 
</html>

CSS width – Related Properties

Here is a list of width-related CSS properties:

Attribute	Value
max-width	Sets the upper limit of the element’s width.
min-width	Sets the lower limit of the element’s width.