Width

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.


Copyright © 2013-2022 Emw3.com
Some rights reserved