The property width specifies the width of the boxes. This property does not apply to inline elements that are non-replaced (like images, objects etc...).

Width property

The width property contains following information:

  1. value: <length>, <percentage>, auto or inherit;
  2. initial: auto;
  3. applies to: all elements except non-replaced inline, table rows and row groups;
  4. inherited: no;
  5. percentages: refers to width of containing block;
  6. media: visual;
  7. computed value: percentage or auto as specified, or the absolute length.

If the value is defined as percentage then it will be calculated with respect to the width of the box's containing block. In the case of being positioned as absolute, the width will be calculated with respect to the width of the box's padding area. The value length refers to a regular length unit while the value auto will make the width depending on other properties (margins, children's properties...). Negative values are not allowed.

To limit the width of the content, two properties may be used: min-width and max-width.

Setting minimum and maximum values

The min-width and max-width properties contain following information:

  1. value: <length>, <percentage> or inherit (min-width); <length>, <percentage>, none or inherit (max-width);
  2. initial: 0 (min-width); none (max-width);
  3. applies to: all elements except non-replaced inline, table rows and row groups;
  4. inherited: no;
  5. percentages: refers to width of containing block;
  6. media: visual;
  7. computed value: percentage as specified, or the absolute length (min-width) percentage as specified, or the absolute length or none (max-width).

If the value is defined as percentage then it will be calculated with respect to the width of the box's containing block. If the containing block's width is negative, the used value is "zero". The value length specifies the fixed value for the constraint properties while the value none (max-width only) naturally puts no limits to the width of the box. Negative values are not allowed.

For elements with the intrinsic ratio and width and height specified as auto, the content's width will be calculated according the following table:

Constraint rules
Constraint violation Resolved width Resolved height
none w h
w > max-width max-width max(max-width * h/w, min-height)
w < min-width
min-width
min(min-width * h/w, max-height)
h > max-height max(max-height * w/h, min-width) max-height
h < min-height min(min-height * w/h, max-width) min-height
(w > max-width) and (h > max-height), where (max-width/w = max-height/h) max-width max(min-height, max-width * h/w)
(w > max-width) and (h > max-height), where (max-width/w > max-height/h) max(min-width, max-height * w/h) max-height
(w < min-width) and (h < min-height), where (min-width/w = min-height/h) min(max-width, min-height * w/h) min-height
(w < min-width) and (h < min-height), where (min-width/w > min-height/h) min-width min(max-height, min-width * h/w)
(w < min-width) and (h > max-height) min-width max-height
(w > max-width) and (h < min-height) max-width min-height

To learn how to calculate width with respect to margins go the "CSS Advanced" chapter.

Example

CSS element's width usage example:

 

›› go to examples ››