Get width value css

width

The width property in CSS specifies the width of the element’s content area. This “content” area is the portion inside the padding, border, and margin of an element (the box model).

In the example above, elements that have a class name of .wrap will be 80% as wide as their parent element. The accepted values are any of the length values, in addition to some keywords we’ll cover later. Width can be overridden by the closely correleated properties min-width and max-width .

When using percentage (%) for width, authors must be aware that the percentage is based on the element’s parent, or in other words, the width of the containing block. If your parent is set at 480px – as demonstrated by our demo – then the percentage is based on that value. So in our case 50% of 480px leaves us with 240px as a computed pixel value. Note that width applies to all elements except non-replaced or inline elements, table rows and row groups (i.e. thead , tfoot and tbody ). There seems to be a slight mismatch as far as how HTML defines non-replaced elements and how CSS defines it, but we’re referring to it the way CSS does: elements whose content is not defined by the tag itself, such as an with the src attribute. 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.

With some special keyword values, it is possible to define width (and/or height) according to the content of the element.

The min-content value is the smallest measure that would fit around its content if all soft wrap opportunities within the box were taken. The best example for this kind of value is a properly written figure element:

If we wanted that figure element to essentially be the size of that image, so the text wraps at the edges of the image. We could float it left or right, because float will exhibit that same kind of shrink-to-fit behavior, but what if we wanted to center it? min-content allows us to center it:

Because we’ve assigned min-content to the figure element, it takes the minimum width it can have when taking all soft wrap opportunities (like spaces between words) so that the content still fits in the box.

The max-content property refers to the narrowest measure a box could take while fitting around its content – if no soft wrap opportunities within the element were taken. Check out what happens if we apply this to our simple kitten/figure demo:

Because the caption is very longer than the image is wide (it doesn’t take any soft wrap opportunity, like the spaces between words), it means it has to display the caption on a single line, thus the figure is as wide as that line.

The fit-content value is roughly equivalent to margin-left: auto and margin-right: auto in behaviour, except it works for unknown widths. For instance, let’s say we need to center an inline navigation across the page. Your best bet would be to apply text-align: center to the ul , and display: inline-block to the li . This would give you something like this:

However, the blue background (from the ul element) spreads across the entire document because the ul is a block-level element, which means its width is restricted only by its containing element. What if we want to have the blue background collapsing around the list items? fit-content to the rescue!

With fit-content and margin: 1em auto , this works like a charm and only the navigation has a colored background, not the whole document width. If you’re into this sort of thing, you’ll be happy to know the formula to define the size of a fit-content length is:

fit-content = min(max-content, max(min-content, fill-available))

IE	Edge	Firefox	Chrome	Safari	Opera
All	All	All	All	All	All

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mobile
All	All	All	All	All

Source: caniuse

Источник

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.

Источник

CSS width Property

The width of an element does not include padding, borders, or margins!

Note: The min-width and max-width properties override the width property.

Default value:	auto
Inherited:	no
Animatable:	yes. Read about animatable Try it
Version:	CSS1
JavaScript syntax:	object.style.width=»500px» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
auto	Default value. The browser calculates the width	Demo ❯
length	Defines the width in px, cm, etc. Read about length units	Demo ❯
%	Defines the width in percent of the containing block	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Set the width of an element using a percent value:

Example

Set the width of an element to 100px. However, when it gets focus, make it 250px wide:

input[type=text]:focus width: 250px;
>

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

CSS: width property

This CSS tutorial explains how to use the CSS property called width with syntax and examples.

Description

The CSS width property defines the width of the content area of an element.

Syntax

The syntax for the width CSS property is:

Parameters or Arguments

The width of the content area of an element. It can be one of the following:

Value	Description
fixed	Fixed value expressed in pixels, em’s, etc. div < width: 150px; > div
percentage	Percentage value div
auto	Browser will calculate the width for the element div
inherit	Element will inherit the width from its parent element div

Note

• The content area of an element is inside the padding, border, and margin of the element.
• The CSS width property applies to block level and replaced elements.
• When the value is provided as a percentage, it is relative to the width of the containing block.
• See also height, max-height, max-width, min-height, min-width.

Browser Compatibility

The CSS width property has basic support with the following browsers:

• Chrome
• Android
• Firefox (Gecko)
• Firefox Mobile (Gecko)
• Internet Explorer (IE)
• IE Phone
• Opera
• Opera Mobile
• Safari (WebKit)
• Safari Mobile

Example

We will discuss the width property below, exploring examples of how to use this property in CSS.

Using Fixed Value

Let’s look at a CSS width example where we have provided the width as a fixed value expressed in pixels.

In this CSS width example, we have set the tag to a width of 200px.

We can also express the width as a fixed value in em’s.

In this CSS width example, we have set the tag to a width of 175em.

Using Percentage

Let’s look at a CSS width example where we have provided the width as a percentage.

In this CSS width example, we have set the width of the to 90%.

Using auto

Let’s look at a CSS width example where we have used auto as the width value.

In this CSS width example, the browser will calculate the width of the .

Источник