CSS

🎨 CSS Width Property

The width property in CSS is used to define the horizontal size of an element.

It controls the width of the content area of an element.

⚠️ By default, width does not include:

Padding
Border
Margin

These are added separately through the CSS Box Model.

📘 Basic Syntax

CSS

width: value;

🔹 Common Width Values

The width property can use several different value types.

1. auto

auto is the default value.

The browser automatically calculates the width based on:

The parent container
The content size
The element type

📘 Example

CSS


div {
  width: auto;
}

💡 The element automatically adjusts its width.

2. Fixed Length Values

You can set a fixed width using units such as:

📘 Example

CSS


div {
  width: 300px;
}

✅ The element width becomes exactly 300px.

3. Percentage %

Percentage values are calculated relative to the parent element.

This is very useful for responsive layouts.

📘 Example

CSS


div {
  width: 50%;
}

✅ The element takes up half of its parent’s width.

4. initial

Resets the property to its default browser value.

📘 Example

CSS


div {
  width: initial;
}

5. inherit

The element inherits the width value from its parent.

📘 Example

CSS


.container {
  width: 80%;
}

.box {
  width: inherit;
}

✅ .box inherits the 80% width from .container.

💡 Width Property Example

📘 HTML + CSS Example

HTML + CSS

 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Width Property</title>
<style>
.container {
  width: 800px;
  background-color: lightgray;
}

.box1 {
  width: auto;
  background-color: lightcoral;
}

.box2 {
  width: 400px;
  background-color: lightblue;
}

.box3 {
  width: 50%;
  background-color: lightgreen;
}
</style>
</head>
<body>
    <div class="container">
        <div class="box1">width: auto</div>
        <div class="box2">width: 400px</div>
        <div class="box3">width: 50%</div>
    </div>
</body>
</html>

🔍 Explanation

Element	Width Behavior
Color type .box1	Automatic width
Color type .box2	Fixed width (400px)
Color type .box3	50% of parent width

🧱 min-width

The min-width property sets the minimum width an element can have.

Even if the screen becomes smaller, the element will not shrink below this value.

📘 Syntax

CSS

min-width: value;

📘 Example

CSS


div {
  min-width: 300px;
}

✅ The element will never become narrower than 300px.

💡 Usage Example

HTML

 
<div style="min-width:300px; background:lightblue;">
     This box will never be narrower than 300px.
</div>

🧱 max-width

The max-width property sets the maximum width an element can have.

Even on very large screens, the element will not exceed this size.

📘 Syntax

CSS

max-width: value;

📘 Example

CSS


div {
  max-width: 800px;
}

✅ The element will never grow wider than 800px.

💡 Usage Example

HTML

 
<div style="max-width:800px; background:lightcoral;">
    This box will not exceed 800px in width.
</div>

⚙️ Using width, min-width, and max-width Together

These properties are commonly combined in responsive web design.

They allow layouts to remain flexible while staying within size limits.

📘 Examples

CSS

 
.container {
  width: 80%;

  min-width: 300px;

  max-width: 1200px;

  background-color: lightgreen;
}

🔍 Explanation

Width is 80% of the page
Minimum width is 300px
Maximum width is 1200px

This creates a responsive but controlled layout.

💡 Practical Responsive Example

📘 HTML + CSS Example

HTML + CSS

 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Min Width and Max Width</title>
<style>
.container {
  width: 80%;

  min-width: 300px;

  max-width: 1000px;

  background-color: lightgray;

  padding: 20px;

  margin: auto;
}

p {
  background-color: lightblue;

  padding: 10px;
}
</style>
</head>
<body>
    <div class="container">
        <p>
            This box expands and shrinks with the screen size,
            but never becomes smaller than 300px
            or larger than 1000px.
        </p>
    </div>
</body>
</html>

CSS Color

CSS Height