Css width initial value

width

The width CSS property sets an element’s width. By default it sets the width of the content area, but if box-sizing is set to border-box , it sets the width of the border area.

The min-width and max-width properties override width .

Syntax

/* values */ width: 300px; width: 25em; /* 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;

The width property is specified as either:

Values

• the intrinsic minimum width
• the smaller of the intrinsic preferred width and the available width

Formal syntax

[ | ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto

Examples

Default width

The Mozilla community produces a lot of great software.

Pixels and ems

Width measured in px
 
Width measured in em

Percentage

max-content

The Mozilla community produces a lot of great software.

min-content

The Mozilla community produces a lot of great software.

Accessibility concerns

Ensure that elements set with a width are not truncated and do not obscure other content when the page is zoomed to increase text size.

Specifications

Specification	Status	Comment
CSS Basic Box Model The definition of ‘width’ in that specification.	Working Draft	Added the max-content , min-content , available , fit-content , border-box , content-box keywords.
CSS Transitions The definition of ‘width’ in that specification.	Working Draft	Lists width as animatable.
CSS Level 2 (Revision 1) The definition of ‘width’ in that specification.	Recommendation	Precises on which element it applies to.
CSS Level 1 The definition of ‘width’ in that specification.	Recommendation	Initial definition.
CSS Intrinsic & Extrinsic Sizing Module Level 3 The definition of ‘width’ in that specification.	Working Draft	Adds new sizing keywords for width and height.

Initial value	auto
Applies to	all elements but non-replaced inline elements, table rows, and row groups
Inherited	no
Percentages	refer to the width of the containing block
Media	visual
Computed value	a percentage or auto or the absolute length
Animation type	a length, percentage or calc();
Canonical order	the length or percentage before the keyword, if both are present

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	Yes	12	1	4	3.5	1
Animatable	?	?	16	?	?	?
max-content	46 46 22

Источник

CSS Height, Width and Max-width

The CSS height and width properties are used to set the height and width of an element.

The CSS max-width property is used to set the maximum width of an element.

CSS Setting height and width

The height and width properties are used to set the height and width of an element.

The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element.

CSS height and width Values

The height and width properties may have the following values:

• auto — This is default. The browser calculates the height and width
• length — Defines the height/width in px, cm, etc.
• % — Defines the height/width in percent of the containing block
• initial — Sets the height/width to its default value
• inherit — The height/width will be inherited from its parent value

CSS height and width Examples

Example

Set the height and width of a element:

Example

Set the height and width of another element:

Note: Remember that the height and width properties do not include padding, borders, or margins! They set the height/width of the area inside the padding, border, and margin of the element!

Setting max-width

The max-width property is used to set the maximum width of an element.

The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width).

The problem with the above occurs when the browser window is smaller than the width of the element (500px). The browser then adds a horizontal scrollbar to the page.

Using max-width instead, in this situation, will improve the browser’s handling of small windows.

Tip: Drag the browser window to smaller than 500px wide, to see the difference between the two divs!

Note: If you for some reason use both the width property and the max-width property on the same element, and the value of the width property is larger than the max-width property; the max-width property will be used (and the width property will be ignored).

Example

This element has a height of 100 pixels and a max-width of 500 pixels:

Try it Yourself — Examples

Set the height and width of elements
This example demonstrates how to set the height and width of different elements.

Set the height and width of an image using percent
This example demonstrates how to set the height and width of an image using a percent value.

Set min-width and max-width of an element
This example demonstrates how to set a minimum width and a maximum width of an element using a pixel value.

Set min-height and max-height of an element
This example demonstrates how to set a minimum height and a maximum height of an element using a pixel value.

All CSS Dimension Properties

Property	Description
height	Sets the height of an element
max-height	Sets the maximum height of an element
max-width	Sets the maximum width of an element
min-height	Sets the minimum height of an element
min-width	Sets the minimum width of an element
width	Sets the width of an element

Источник

CSS width Property

The CSS width property sets the width of an element. The width does not include border, padding or margin.

The width property applies to all elements except non-replaced or inline elements, table rows and row groups (i.e. , and ).

The property takes a CSS length (px, pt, em, and so on), a percentage, or the keyword auto.

We should mention that the percentage used for this property is based on the parent element (i.e. the width of the containing block). For absolutely positioned elements having a containing block based on a block container element, the percentage is calculated regarding the width of the element’s padding box.

The width property can be overridden by the properties of min-width and max-width.

Initial Value	auto
Applies to	All elements.
Inherited	No.
Animatable	Yes. The width of an element is animatable.
Version	CSS1
DOM Syntax	Object.style.width = «300px»;

Syntax

width: auto | lenght | initial | inherit;

Example of the width property specified in “%”:

html> html> head> title>Title of the document title> style> div < width: 50%; background-color: #1c87c9; > style> head> body> h2>Width property example h2> div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. div> body> html>

Result

In the given example the width of the text is 50%.

In the following example, the width of the first element is 250px and the one of the second element is 25em:

Example of the width property specified in “px” and “em”:

html> html> head> title>Title of the document title> style> div.t1 < width: 250px; border: 1px solid black; background-color: #1c87c9; > div.t2 < width: 25em; border: 1px solid black; background-color: #8ebf42; > style> head> body> h2>Width property example h2> h3>width: 250px h3> div class="t1"> Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. div> h3>width: 25em h3> div class="t2"> Lorem Ipsum is simply dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. div> body> html>

Values

Value	Description	Play it
auto	The browser will calculate a width for the specified element. This is default value.	Play it »
length	Defines width in px, pt, cm, etc.	Play it »
%	Defines width in percent of the containing element.	Play it »
initial	Makes the property use its default value.	Play it »
inherit	Inherits the property from its parents element.

Источник

width

The width CSS property sets an element’s width. By default, it sets the width of the content area, but if box-sizing is set to border-box , it sets the width of the border area.

Try it

The specified value of width applies to the content area so long as its value remains within the values defined by min-width and max-width .

• If the value for width is less than the value for min-width , then min-width overrides width .
• If the value for width is greater than the value for max-width , then max-width overrides width .

Syntax

/* values */ width: 300px; width: 25em; /* value */ width: 75%; /* Keyword values */ width: max-content; width: min-content; width: fit-content(20em); width: auto; /* Global values */ width: inherit; width: initial; width: revert; width: revert-layer; width: unset; 

Values

Defines the width as a distance value.

Defines the width as a percentage of the containing block’s width.

The browser will calculate and select a width for the specified element.

The intrinsic preferred width.

The intrinsic minimum width.

Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, )) .

Accessibility concerns

Ensure that elements set with a width aren’t truncated and/or don’t obscure other content when the page is zoomed to increase text size.

Formal definition

Initial value	auto
Applies to	all elements but non-replaced inline elements, table rows, and row groups
Inherited	no
Percentages	refer to the width of the containing block
Computed value	a percentage or auto or the absolute length
Animation type	a length, percentage or calc();

Formal syntax

width =
auto |
|
min-content |
max-content |
fit-content( )

=
|

Examples

Default width

p class="goldie">The Mozilla community produces a lot of great software.p> 

Example using pixels and ems

.px_length  width: 200px; background-color: red; color: white; border: 1px solid black; > .em_length  width: 20em; background-color: white; color: red; border: 1px solid black; > 

div class="px_length">Width measured in pxdiv> div class="em_length">Width measured in emdiv> 

Example with percentage

.percent  width: 20%; background-color: silver; border: 1px solid red; > 

div class="percent">Width in percentagediv> 

Example using «max-content»

p.maxgreen  background: lightgreen; width: intrinsic; /* Safari/WebKit uses a non-standard name */ width: -moz-max-content; /* Firefox/Gecko */ width: -webkit-max-content; /* Chrome */ width: max-content; > 

p class="maxgreen">The Mozilla community produces a lot of great software.p> 

Example using «min-content»

p.minblue  background: lightblue; width: -moz-min-content; /* Firefox */ width: -webkit-min-content; /* Chrome */ width: min-content; > 

p class="minblue">The Mozilla community produces a lot of great software.p> 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 18, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник