Selected Reading
Q&A

CSS - width

CSS Width Property

The width property sets the width of an element's content area. In case, the box-sizing is set to border-box, the property width sets the width of the border area.

The value specified by the width property remains within the values defined by min-width and max-width properties.

Refer the image for the understanding of width of an element.

Syntax

CSS allows to set width of an element in a variety of ways. Let's check all the possible available syntax to set the width of an element.

Length Value

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

Percentage Value

width: 75%;
width: 50%;

Keyword Value

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

Global Value

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

Negative values like width: -200px are not accepted.

Applies to

All the HTML elements except non-replaced inline elements, table rows, and row groups.

DOM Syntax

object.style.width = "100px";

CSS Width - Demo

Try to select different values for CSS width property and see the result in right box.

CSS Width - Length Value

CSS allows to set the width of an element to a specific length value such as pixels (px), centimeters (cm), inches (in), etc. Here is an example of adding a width to a div element in 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 Value

CSS allows to set the height of an element to a percentage of the width of the containing element. Here is an example of adding a width to a div element in 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 Values

Here the browser will calculate the width automatically based on the content. It is the default width of an element. Here is an example of adding a width to a div element as 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

Here is an example of width equal to max-content and min-content. The max-content defines the intrinsic preferred width where as min-content defines the intrinsic 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

Here is an example of fit-content value set for width of a 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

Following is the list of related CSS properties of width:

property	value
max-width	Sets an upper bound on the width of an element.
min-width	Sets an lower bound on the width of an element.