Set the width of an element.
Syntax width: width | auto | inherit ;
width - The width in px, pt, em, % etc.
auto - The browser will calculate and select a width (default).
min-content - The intrinsic minimum width. Experimental/CSS 3. (Firefox moz-min-content and Chrome webkit-min-content).
max-content - The intrinsic preferred width. Experimental/CSS 3. (Firefox moz-max-content and Chrome webkit-max-content).
fit-content - The intrinsic minimum width if available. Experimental/CSS 3. (Firefox moz-fit-content and Chrome webkit-fit-content).
inherit - inherit from the parent element.
If a DIV contains more text than will fit within a limited width, then it will scroll below the bottom border. If a single word is wider than the width then it will spill outside the right border.
The min and max-content values are not particularly useful on the width property, but are often set on min-width and max-width.
Examples:
h1 { width: 250px; }
.emw3class { width: 25em; }
#emw3id { width: 400pt; }
Try it:
This is a sample of text with a CSS border. The border helps to display the width of the element. |
(CSS 1) Browser Support: All major browsers. IE versions up to and including 7 don’t support the value inherit.
“I don't want to get to the end of my life and find that I lived just the length of it. I want to have lived the width of it as well” ~ Diane Ackerman
Related:
max-width - Maximum width of an element.
min-width - Minimum width of an element.
-webkit-text-stroke-width - Stroke width.
height - Height of an element.