CSS Width

The width property in CSS is used to set the width of an element’s content area. It defines how wide the content of an element should be, and it does not include padding, borders, or margins.

Syntax

element {
    width: value;
}

Try It Now

Property Values

  • auto:
    • The default value. The browser calculates the width of the element.
    • Example: width: auto;
  • length (e.g., px, em, rem, etc.):
    • Specifies a fixed width using a length unit.
    • Example: width: 300px;
  • percentage (%):
    • Sets the width relative to the parent element’s width.
    • Example: width: 50%;
  • max-content:
    • The width of the element’s content.
    • Example: width: max-content;
  • min-content:
    • The minimum width of the content that can fit without breaking.
    • Example: width: min-content;
  • fit-content:
    • Acts as a compromise between min-content and max-content.
    • Example: width: fit-content;
  • inherit:
    • Inherits the width value from its parent element.
    • Example: width: inherit;
  • initial:
    • Sets the width to its default value (auto).
    • Example: width: initial;
  • unset:
    • Resets the width to its inherited value if specified, otherwise sets it to the default value.
    • Example: width: unset;

Examples

Example 1: Fixed Width with px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .box {
            width: 300px;
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="box">This is a box with a fixed width of 300px.</div>
</body>
</html>

Try It Now

Example 2: Percentage Width

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .box {
            width: 50%;
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="box">This box takes up 50% of the parent container's width.</div>
</body>
</html>

Try It Now

Example 3: max-content Width

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .box {
            width: max-content;
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="box">This box has a width based on the content length.</div>
</body>
</html>

Try It Now

Example 4: fit-content Width

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .box {
            width: fit-content;
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="box">This box has a width that fits the content but does not exceed its parent's width.</div>
</body>
</html>

Try It Now

Box Model and width

The width property affects only the content area. To understand how the total width of an element is calculated, consider the CSS box model, which includes:

  • Content: Defined by the width property.
  • Padding: Space between the content and the border.
  • Border: Surrounds the padding (if any).
  • Margin: Space outside the border.

To include padding and border in the width calculation, you can use the box-sizing property.

Example: box-sizing: border-box

.box {
    width: 300px;
    padding: 10px;
    border: 5px solid black;
    box-sizing: border-box; /* Includes padding and border in width */
}

Try It Now

Responsive Design

Using percentages and auto values for width is common in responsive design. This ensures that elements adjust their width based on the screen size or the size of their parent containers.

Example: Responsive Layout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            width: 100%;
        }
        .box {
            width: 50%;
            border: 1px solid black;
            float: left;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
    </div>
</body>
</html>

Try It Now

Summary

The width property is fundamental in controlling the layout and design of web pages. It allows you to set the width of elements precisely or relatively, contributing to flexible and responsive designs. Understanding how width interacts with the CSS box model and using it effectively is key to creating well-structured and visually appealing layouts.