height
or width
property in CSS styles:<img style="height: 100px" />
The width
and height
properties are available for all HTML elements. But the width
and height
attributes are only available for some elements such as canvas
, image
, table
, td
, etc.
<!-- Work -->
<img width="200px" />
<!-- Does NOT work -->
<div width="200px"></div>
For canvas
elements, they don't produce the same result.
According to the HTML specifications, if the width
and height
attributes are missing then the default value will be used.
The width
attribute defaults to 300, and the height
attribute defaults to 150.
It's recommended to set the height
and width
attributes for canvas directly or via JavaScript to avoid the problem that the canvas is stretched.
<!-- Work -->
<canvas height="100" width="100"></canvas>
<!-- Does NOT work -->
<canvas style="height: 100px; width: 100px;"></canvas>
The width
and height
attributes of canvas must be positive numbers without the units. width="100px"
will have no affect despite the fact that it seems to be a valid attribute declaration for other elements.
The CSS style properties have the higher priority than the HTML properties.
In the following example, the height: 200px
property will override the height="100px"
attribute:
<!-- The image will have the width of 200px -->
<img height="100px" style="height: 200px" />
The width
and height
attributes are still used widely in emails where we have to support multiple screen sizes (mobile, desktop) and various email clients.