Initial width
width
Specify the element's initial width.
Property values
This value has two different interpretations depending upon the current value of the element's box-sizing property.
| box-sizing: content-box | The width is the size of the element's content area only |
| box-sizing: border-box | The width is the sum of the element's content area plus the size of its left-padding and right-padding plus the thickness of its left-border and right-border |
Units
Use any of these font-relative typographic units to set the element's width:
| em | em | The font-size of the current font |
| rem | relative em | The font-size of the <html> element |
| ch | "0" | The advance measure (the width) of the current font's "0" glyph |
| ic | ideograph count | The advance measure (the width) of the current font's "水" ideograph |
Or use any of these fixed size units which are independent of the current font:
| % | percent | A percentage of the parent element's width |
| in | inch | A size equal 96px |
| px | pixels | A size equal to 1/96 inch |
| pt | point | A size equal 1in/72 = 1.33px |
| pc | pica | A size equal 1in/6 = 12pt = 16px |
| cm | centimeter | A size equal to 96px/2.54 = 37.8px |
| mm | millimeter | A size equal to 96px/25.4 = 3.8px |
| Q | quarter millimeter | A size equal to 96px/1016 = 0.94px |
Or use these viewport-percentage units which account for different display device capabilities:
| vh | viewport height | 1% of the viewport's height |
| vw | viewport width | 1% of the viewport's width |
| vi | viewport inline axis | 1% of the viewport's inline axis |
| vb | viewport block axis | 1% of the viewport's block axis |
| vmin | viewport minimum | Either vh or vw, whichever is smaller |
| vmax | viewport maximum | Either vh or vw, whichever is larger |
Examples
width: 200px;