HTML width/height Attribute vs CSS width/height Property - GeeksforGeeks

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: 
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: 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
kalrap615
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Design a web page using HTML and CSS
Create a Responsive Navbar using ReactJS
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)
Types of CSS (Cascading Style Sheet)