← Back tothis vs that

style="width: ___" vs width="___"

Written byPhuoc Nguyen
02 Jul, 2020
Last updated
22 Jul, 2022
There are two ways to define the dimension for an element:
  • Using the `height` or `width` attributes:
<img height="100" />
  • Or using the `height` or `width` property in CSS styles:
<img style="height: 100px" />


  1. 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>
  2. 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.
  3. 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" />

Good to know

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.

Questions? 🙋

Do you have any questions? Not just about this specific post, but about any topic in front-end development that you'd like to learn more about? If so, feel free to send me a message on Twitter or send me an email. You can find them at the bottom of this page.
I have a long list of upcoming posts, but your questions or ideas for the next one will be my top priority. Let's learn together! Sharing knowledge is the best way to grow 🥷.

Recent posts ⚡

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.
By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.
Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.
Phước Nguyễn