width property is used to specify the width of the content area of an element. The content area is the area inside the padding, border, and margin of the element. Keep in mind that the
max-width properties override the width value set using
The initial value of
width property is
auto. You can apply it to all elements except non-replaced inline elements, table rows, and row groups. This property is not inheritable. The final computed value of this property is a percentage, auto or the absolute length. This property is animatable as a length, percentage or
One thing that you should keep in mind is that by default, any padding added to the element will increase the total computed width of the element. This means that you may not always end up with the expected width by just using the width property. For example, an element with
width: 250px and
padding: 25px will render to a width of 300px.
This is the formal syntax for using width property.
width: [ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto
Here are some examples of using this property.
/* <length> values */ width: 300px; width: 25em; /* <percentage> value */ width: 75%; /* Keyword values */ width: 25em border-box; width: 75% content-box; width: max-content; width: min-content; width: available; width: fit-content; width: auto; /* Global values */ width: inherit; width: initial; width: unset;
This is used to specify the width of an element using a length unit. When the keyword
border-box is present, the length sets the size of the border box. When the keyword
content-box is present, the length sets the size of the content box. When no keyword is present, the
box-sizing property is used to determine which size shoud be set for the element.
This value is used to specify the width of an element as a percentage of the width of the element’s container.
Please note that for absolutely positioned elements whose containing block is based on a block container element, the percentage is calculated with respect to the width of the padding box of that element and not the width of the content box of that element.
If the width of the containing block depends on the width of the element, the resulting layout is undefined.
In this case, the browser will calculate and select a width for the element.
When this value is specified, the element’s width is equal to the containing block width minus the current element’s margin, border, and padding.
The is the intrinsic preferred width. The
max-content width is roughly equal to the size of content if no “soft” line breaks were inserted.
The is the intrinsic minimum width. The
min-content width is roughly equal to the narrowest size the box can get by breaking all lines at all possible break points. In most cases its width will depend on the width of its widest inline element.
The value of
fit-content is the larger of:
- the smaller of the
fit-content value can prove useful when you want to define the width of an element based on other elements inside it with unknown widths.
The width property is supported in all major browsers like Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.
- Read more about the CSS
<width>property on MDN.
- You can also read the CSS
<width>property on CSSWG.
2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.