HTML width/height Attribute vs CSS width/height Property

Last Updated : 26 Jul, 2021

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:

html

   <!DOCTYPE html>
<html>
 
<head>
    <title> 
        Comparison between height/width
        attributes and height/width
        property
    </title>
     
    <style>
        h1 {
            color: green;
        }
        .container {
            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="container">
            <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>
 
  

Output:

HTML | <th> height Attribute

Sabya_Samadder

Improve

Article Tags :

HTML width/height Attribute vs CSS width/height Property

html

Similar Reads