HTML width/height Attribute vs CSS width/height Property

In HTML 5, few elements follow the width and height attributes and maximum elements do not follow this attribute. Like img, iframe, canvas, and svg kind of elements follow the width and height attributes but div, span, article and section type of elements don’t follow them.

The width and height attributes are affected in img, svg tags, those are weak kind of styling, it can be overridden by CSS. If you have assigned an img tag with the width=”500″ and height=”200″ and load a CSS width and height property for img tag like width: 400px; then that 500 will be dully 400 will effect the image.



<!-- Normally  in HTML -->
<img src=" " width="600" height="200">

/* In CSS for override*/
img {
    width: 400px;
    height: 400px;
}

There are few more attributes that are not selected for a few elements those are very strongly affected on the output. To apply CSS properties on those element you have to know how to apply !important in CSS?.

Differences between HTML width/height attribute and CSS width/height property:

HTML width/height Attribute CSS width/height Property
It is used for presentational. It is used for actual effect on the web.
It affects on few HTML elements like img, svg, canvas etc. It affects on all the HTML elements (!important may required for override inline styles).
It reserves required space with fluid images for the smooth loading. It does not reserve required spaces so when the elements occur page will be shake in few times.

Below example uses height/width attributes and height/width property.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title
        Comparison between height/width
        attributes and height/width
        property
    </title>
      
    <style>
        h1 {
            color: green;
        }
        .conatiner {
            width: 95%;
            border: 2px solid black;
            padding: 5px;
            height: 400px;
        }
          
        .first {
            text-align: center;
            width: 45%;
            float: left;
        }
          
        .second {
            text-align: center;
            width: 45%;
            float: right; 
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
          
        <h2>
            HTML height/width Attribute Vs
            CSS height/width property
        </h2>
          
        <div class="conatiner">
            <div class="first">
                <h3>HTML width/height Attributes</h3
                <img src="" width="150px" height="150px"
                        style="border:2px solid #000000;">
                  
                <iframe src="" width="150px" height="150px"
                        style="border:2px solid #000000;">
                </iframe>
                  
                <canvas src="" width="150px" height="150px"
                        style="border:2px solid #000000;">
                </canvas>
                  
                <svg src="" width="150px" height="150px"
                        style="border:2px solid #000000;">
                </svg>
            </div>
              
            <div class="second">
                <h3>CSS width/height Property</h3>
                <div width="150px" height="150px"
                        style="border:2px solid #000000;">
                    This is div tag
                </div>
                  
                <br><br
                  
                <span width="150px" height="150px"
                        style="border:2px solid #000000;">
                    This is span tag
                </span>
                  
                <br><br>
                  
                <article width="150px" height="150px"
                        style="border:2px solid #000000;">
                    This is article tag
                </article>
                  
                <br><br>
                  
                <section width="150px" height="150px"
                        style="border:2px solid #000000;"
                    This is section tag
                </section>
            </div>
        </div>
    </center>
</body>
  
</html>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.