height
or width
attributes:<img height="100" />
height
or width
property in CSS styles:<img style="height: 100px" />
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">
canvas
elements, they don't produce the same result.width
and height
attributes are missing then the default value will be used. width
attribute defaults to 300, and the height
attribute defaults to 150.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">
<!-- Does NOT work -->
<canvas style="height: 100px; width: 100px;">
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.height: 200px
property will override the height="100px"
attribute:<!-- The image will have the width of 200px -->
<img height="100px" style="height: 200px" />
width
and height
attributes are still used widely in emails where we have to support multiple screen sizes (mobile, desktop) and various email clients.