Width Property in CSS
The width attribute controls the width of a content area. The property width determines the width of the border region if the box-sizing is set to border-box.
The width property's value stays between the limits set by the min-width and max-width parameters.
The width of text and pictures may be set using the width property in CSS. Text and pictures can have their width specified in terms of pixels (px), percentages (%), centimetres (cm), etc. There are no padding, borders, or margins in the width property. The min-width and max-width properties take precedence over the width property. By default, the width property determines the width of the content area; however, if the box-sizing value is border-box, it also determines the width of the border area.
Syntax:
width: auto | value | initial | inherit;
The width of an element may be set in CSS in several different ways. Let's examine every single syntactic option for setting an element's width.
Length Value
With CSS, you may specify the width of an element in terms of pixels (px), centimetres (cm), inches (in), etc. Here is an illustration of adding width in length units to a div element:
- width: 120px;
- width: 10em;
- width: 100vh;
Percentage Value
With CSS, you may specify a percentage of the contained element's width as the height of an element. Here is an illustration of how to add a width in percentage values to a div element:
- 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;
We do not allow negative values such as width: -200px.
Note: The element's width parameter does not include the padding, border, and margin.
- Default Value: Auto is the default value for this field.
- Property Values: The sample below describes all the properties well.
Auto:
This setting makes the width property's default setting. The browser determines the element's width if the width attribute is auto-generated.
Here, the browser will determine the width automatically based on the content. It is an element's default width. Here is an illustration of how to add a width as auto to a div element:
Syntax:
width: auto;
Example: This example shows how to utilise the width property with the auto value.
<!DOCTYPE html>
<html>
<head>
<title>Example of CSS width Property </title>
<style>
.main {
width: auto;
color: pink;
font-size: 30px;
background-color: black;
}
h2 {
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<h2>
An example of CSS width Property
</h2>
<p class="main">
This is an example of the auto-width property
</p>
</body>
</html>
Output
Value:
It is used to provide the width in terms of pixels (px), percentages (%), centimetres (cm), and other measurements. There can never be a negative breadth.
Syntax:
width: value;
Example: The width property, whose value may be specified in pixels (px), percentages (%), centimetres (cm), etc., is used in this example to show how it works.
<!DOCTYPE html>
<html>
<head>
<title> CSS Width Property </title>
<style>
.main {
width: 150px;
color: black;
font-size: 24px;
background-color: pink
}
.main1 {
width: 30%;
color: black;
font-size: 20px;
background-color: pink;
}
h2 {
color: green;
}
</style>
</head>
<body>
<h2>
Example of CSS width Property
</h2>
<p class="main">
An example of width property using pixels.
</p>
<p class="main1">
An example of width property using percentage.
</p>
</body>
</html>
Output
Initial:
It is used to set the default value of a CSS property on an element.
Syntax:
width: initial;
Example: This example shows how to use the width property, which has the initial value set.
<!DOCTYPE html>
<html>
<head>
<title>Example of CSS Width Property </title>
<style>
.main {
width: initial;
color: black;
font-size: 25px;
background-color: pink;
}
h2 {
color: blue;
}
</style>
</head>
<body>
<h2>
Example of CSS width Property
</h2>
<p class="main">
An illustration of a width property's initial width value.
</p>
</body>
</html>
Outpu
Inherit:
The value inherit keyword is used to pass a property from a parent element's property value to an element. Any CSS attribute may be inherited, as well as any HTML element, using the inherit keyword.
Syntax:
width: inherit;
Example
<!DOCTYPE html>
<html>
<head>
<style>
span {
font-size: 20px;
}
.main {
font-size: inherit;
}
</style>
</head>
<body>
<h1 style="text-align: left;
color: red;">
Example of inherited property
</h1>
<div style="text-align: left; font-size: 25px;">
<span class="main">Inherited size</span>
</div>
</body>
</html>
Output
