Width and height | Frontend Practical Guide

Overview

width and height control the dimensions of an element’s box. They are fundamental sizing tools for components, media, and layout primitives.

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`height`	1	12	1	1	18	1
`auto`	1	12	1	1	18	1
Other
`css.properties.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.	1	12	1	1	18	1
CSS property
`auto`	1	12	1	1	18	1
`is animatable` Is animatable	26	12	16	7	26	7
Other
`css.types.dimension` The CSS data type represents a <number> with a unit attached to it, for example 10px.	1	12	1	1	18	1
`css.types.length` The CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow.	1	12	1	1	18	1
`css.types.length-percentage` The CSS data type represents a value that can be either a length or a percentage.	1	12	1	1	18	1
`css.types.percentage` The CSS data type represents a percentage value. It is often used to define a size as relative to an element's parent object. Numerous properties can use percentages, such as width, height, margin, padding, and font-size.	1	12	1	1	18	1

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

CSS

.fixed { width: 300px; height: 200px; }
.fluid { width: 100%; height: auto; }
.viewport { width: 100vw; height: 100vh; }

CSS Locksize demo.

CSS dynamicsize demo.

CSS -po-tunit demo.

Component sizing
Set intentional dimensions for media, controls, and layout regions that need stable bounds.
Reserved media space
Prevent jumps by reserving image or embed space before content fully loads.