The CSS width property is used to define the horizontal size of an element on a webpage. It helps control the layout and appearance of content such as images, divs, and text containers.
- The width property supports units like px, %, em, and cm.
- It affects only the content area unless box-sizing: border-box is applied.
- The min-width and max-width properties can limit or override the defined width.
Try CSS Width Property
Syntax:
width: auto | value | initial | inherit;Note: The width property for the element does not involve the padding, border & margin.
Default Value:
Its default value is auto.
Property Values:
| Value | Description |
|---|---|
auto | Default value; the browser calculates the width of the element automatically. |
value | Sets the width using units like pixels (px), percentages (%), or centimeters (cm). Cannot be negative. |
initial | Sets the width property to its default value. |
inherit | Inherits the width property from its parent element. |
All the properties are described well with the example below.
Setting Width to auto
It is used to set the width property to its default value. If the width property is set to auto then the browser calculates the width of the element.
Syntax
width: auto;Example: This demonstrates the use of the width property whose value is set to auto.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title> CSS width Property </title>
<!--Driver Code Ends-->
<style>
.gfg {
width: auto;
color: white;
font-size: 20px;
background-color: rgb(0, 150, 0);
}
h2 {
font-size: 20px;
color: black;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h2>
CSS width Property
</h2>
<p class="gfg">
This is an example of auto width property
</p>
</body>
</html>
<!--Driver Code Ends-->
Setting Width with Specific Units
It is used to set the width in the form of pixels(px), Percentage(%), centimetre(cm) etc. The width can not be negative.
Syntax:
width: value;Example: This demonstrates the use of the width property whose value can be defined in pixels(px), Percentage(%), centimetre(cm) etc.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title> CSS Width Property </title>
<!--Driver Code Ends-->
<style>
.gfg {
width: 150px;
color: white;
font-size: 20px;
background-color: RGB(0, 150, 0);
}
.gfg1 {
width: 50%;
color: white;
font-size: 20px;
background-color: RGB(0, 200, 0);
}
h2 {
color: black;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h2>
CSS width Property
</h2>
<p class="gfg">
An example of width property in form of pixels.
</p>
<p class="gfg1">
An example of width property in form of percentage.
</p>
</body>
</html>
<!--Driver Code Ends-->
Setting Width to initial
It is used to set an element’s CSS property to its default value.
Syntax:
width: initial;Example: This demonstrates the use of the width property whose value is set to the initial.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title> CSS Width Property </title>
<!--Driver Code Ends-->
<style>
.gfg {
width: initial;
color: white;
font-size: 20px;
background-color: RGB(0, 150, 0);
}
h2 {
color: black;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h2>
CSS width Property
</h2>
<p class="gfg">
An example of width property for its initial width value.
</p>
</body>
</html>
<!--Driver Code Ends-->
Inheriting Width from Parent
It is used to inherit a property to an element from its parent element property value.
Syntax
width: inherit;Example: This demonstrates the width property set to inherit.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Width: inherit Example</title>
<!--Driver Code Ends-->
<style>
.parent {
width: 300px;
border: 1px solid black;
}
.child {
width: inherit;
border: 1px solid red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="parent">
Parent div
<div class="child">Child div (inherits width)</div>
</div>
</body>
</html>
<!--Driver Code Ends-->