CSS Property: width

The width property sets the width of an element. The element width does not include padding, borders, or margins. The properties min-width and max-width override the width property.
EXAMPLE
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>width</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <style>
        * {
            box-sizing: border-box;
        }
        
        .container {
            padding: 20px;
            background-color: #f8f9fa;
            color: #333333;
            border-radius: 8px;
            margin: 20px auto;
        }
        
        .example {
            margin-bottom: 30px;
            border: 1px solid #dee2e6;
            padding: 15px;
            border-radius: 6px;
            background: white;
        }
        
        .element {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            margin: 10px 0;
            text-align: center;
            border-radius: 4px;
        }
        
        /* different widths */
        .width-pixel {
            width: 200px;
        }
        
        .width-percent {
            width: 75%;
        }
        
        .width-auto {
            width: auto;
            background-color: #2196F3;
        }
        
        .width-max {
            width: 100%;
            background-color: #FF5722;
        }
        
        .width-min {
            width: min-content;
            background-color: #9C27B0;
        }
        
        .width-fit {
            width: fit-content;
            background-color: #607D8B;
        }
        
        .description {
            font-style: italic;
            color: #666;
            margin-top: 10px;
            font-size: 0.9em;
        }
        
        .code {
            background-color: #f8f9fa;
            padding: 8px;
            border-radius: 4px;
            margin: 5px 0;
            font-family: monospace;
            border: 1px solid #dee2e6;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="example">
        <h3>Fixed Width (pixels)</h3>
        <div class="element width-pixel">width: 200px</div>
        <p class="description">The element has a fixed width of 200 pixels.</p>
        <div class="code">width: 200px;</div>
    </div>
    
    <div class="example">
        <h3>Percentage Width</h3>
        <div class="element width-percent">width: 75%</div>
        <p class="description">The element takes up 75% of the parent element's width.</p>
        <div class="code">width: 75%;</div>
    </div>
    
    <div class="example">
        <h3>Auto Width</h3>
        <div class="element width-auto">width: auto</div>
        <p class="description">The element adjusts to content while respecting padding and margin.</p>
        <div class="code">width: auto;</div>
    </div>
    
    <div class="example">
        <h3>Maximum Width</h3>
        <div class="element width-max">width: 100%</div>
        <p class="description">The element takes up the full width of its parent element.</p>
        <div class="code">width: 100%;</div>
    </div>
    
    <div class="example">
        <h3>Minimum Content Width</h3>
        <div class="element width-min">width: min-content</div>
        <p class="description">The element shrinks to the smallest possible width based on its content.</p>
        <div class="code">width: min-content;</div>
    </div>
    
    <div class="example">
        <h3>Fit Content Width</h3>
        <div class="element width-fit">width: fit-content</div>
        <p class="description">The element adjusts to content width but won't exceed parent element width.</p>
        <div class="code">width: fit-content;</div>
    </div>
    
    <div class="example">
        <p class="description">
            <strong>Important:</strong>
            <ul>
                <li>The width property sets the width of the content area</li>
                <li>Actual element width is width + padding + border (unless using box-sizing: border-box)</li>
                <li>Can be used with various units (px, %, em, rem, vw...)</li>
                <li>Relative units are recommended for responsive design</li>
            </ul>
        </p>
    </div>
</div>
</body>
</html>
RESULT