{"id":301933,"date":"2020-01-24T09:03:15","date_gmt":"2020-01-24T16:03:15","guid":{"rendered":"https:\/\/css-tricks.com\/?p=301933"},"modified":"2020-01-24T14:24:55","modified_gmt":"2020-01-24T21:24:55","slug":"whats-the-difference-between-width-height-in-css-and-width-height-html-attributes","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/whats-the-difference-between-width-height-in-css-and-width-height-html-attributes\/","title":{"rendered":"What’s the Difference Between Width\/Height in CSS and Width\/Height HTML attributes?"},"content":{"rendered":"\n

Some<\/em> HTML elements accept width<\/code> and height<\/code> as attributes. Some do not. For example:<\/p>\n\n\n\n

<!-- valid, works, is a good idea -->\n<img width=\"500\" height=\"400\" src=\"...\" alt=\"...\">\n<iframe width=\"600\" height=\"400\" src=\"...\"><\/iframe>\n<svg width=\"20\" height=\"20\"><\/svg>\n\n<!-- not valid, doesn't work, not a good idea -->\n<div width=\"40\" height=\"40\"><\/div>\n<span width=\"100\" height=\"10\"><\/span><\/code><\/pre>\n\n\n\n
Those attributes are sometimes referred to as presentational attributes<\/em>. The thing to know about them is that they are overridden by any other styling information whatsoever.<\/strong> That makes them ideal as a fallback.<\/p>\n\n\n\n
So, if CSS loads and has a declaration like:<\/p>\n\n\n\n
img {\n  width: 400px;\n}<\/code><\/pre>\n\n\n\n
…that is going to override<\/em> the width=\"500\"<\/code> on the <img><\/code> tag above. Presentational attributes are the weakest kind of styling, so they are overridden by any CSS, even selectors with very low specificity<\/a>. <\/p>\n\n\n\n
What might be a smidge confusing is that presentational attributes seem like they would have high specificity. These inline styles<\/strong>, for instance, are<\/em> very strong:<\/p>\n\n\n\n
<img style=\"width: 500px; height: 400px;\" src=\"...\" alt=\"...\"><\/code><\/pre>\n\n\n\n
Using an inline style (which works on any element, not a select few), we’ve moved from the weakest<\/em> way to apply width and height to one of the strongest<\/em>. Regular CSS will not override this, with a selector of any specificity strength. If we need to override them from CSS, we’ll need !important<\/code> rules. <\/p>\n\n\n\n
img {\n  width: 400px !important;\n}<\/code><\/pre>\n\n\n\n
To reiterate, presentational attributes on elements that accept them (e.g. <img><\/code>, <iframe><\/code>, <canvas><\/code>, <svg><\/code>, <video><\/code>) are a good idea. They are fallback sizing and sizing information as the page is loading. They are particularly useful on <svg><\/code>, which may size themselves enormously in an awkward way if they have a viewBox<\/code> and lack width and height attributes. Browsers even do special magic with images, where the width and height are used to reserve the correct aspect-ratio derived space in a situation with fluid images, which is great for a smooth page loading experience. <\/p>\n\n\n\n
But presentational attributes are also weak and are usually overridden in the CSS.<\/p>\n","protected":false},"excerpt":{"rendered":"
Some HTML elements accept width and height as attributes. Some do not. Those attributes are sometimes referred to as presentational attributes. The thing to know about them is that they are overridden by any other styling information whatsoever. That makes them ideal as a fallback.<\/p>\n","protected":false},"author":3,"featured_media":298713,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[4958,585,1380],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/images-all-around.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":287273,"url":"https:\/\/css-tricks.com\/svg-properties-and-css\/","url_meta":{"origin":301933,"position":0},"title":"SVG Properties and CSS","date":"May 13, 2019","format":false,"excerpt":"SVG has its own set of elements, attributes and properties to the extent that inline SVG code can get long and complex. By leveraging CSS and some of the forthcoming features of the SVG 2 specification, we can reduce that code for cleaner markup.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/05\/svg-fallback-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":334668,"url":"https:\/\/css-tricks.com\/barebones-css-for-fluid-images\/","url_meta":{"origin":301933,"position":1},"title":"Barebones CSS for Fluid Images","date":"February 18, 2021","format":false,"excerpt":"Zach takes a look at some fundamental HTML+CSS usage for fluid, responsive images. Most of it, I'd say, is what you'd expect, but things get weird when srcset gets involved. I poked my way through, and in addition to the weird thing Zach noted, wanted to add one more thing.\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/zach-fluid-images-ex.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":303706,"url":"https:\/\/css-tricks.com\/do-this-to-improve-image-loading-on-your-website\/","url_meta":{"origin":301933,"position":2},"title":"Do This to Improve Image Loading on Your Website","date":"February 19, 2020","format":false,"excerpt":"In the video embedded below, Jen Simmons explains how to improve image loading by using width and height attributes. The issue is that there\u2019s a lot of jank when an image is first loaded because an img will naturally have a height of 0 before the image asset has been\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/jen-simmons-video-still.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":249249,"url":"https:\/\/css-tricks.com\/presentation-attributes-vs-inline-styles\/","url_meta":{"origin":301933,"position":3},"title":"Presentation Attributes vs Inline Styles","date":"December 23, 2016","format":false,"excerpt":"This is a distinction worth knowing about. They look pretty similar. They can do some of the same things. But, one is very easy to override and the other is not. Inline styles are likely a bit more familiar: Inline styles on an HTML element. SVG can do that too:\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/12\/overrides.png?fit=929%2C612&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":192227,"url":"https:\/\/css-tricks.com\/scale-svg\/","url_meta":{"origin":301933,"position":4},"title":"How to Scale SVG","date":"January 6, 2015","format":false,"excerpt":"The following is a guest post by Amelia Bellamy-Royds. Amelia has lots of experience with SVG, as the co-author of\u00a0SVG Essentials\u00a0and author of the upcoming\u00a0Using SVG with CSS3 and HTML5. Amelia and I both will be speaking on SVG at the upcoming\u00a0RWD Summit\u00a0as well! Here, she shares an epic guide\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":168799,"url":"https:\/\/css-tricks.com\/dealing-content-images-email\/","url_meta":{"origin":301933,"position":5},"title":"Dealing with Content Images in Email","date":"April 29, 2014","format":false,"excerpt":"Let's say you're using an RSS-to-Email service. They're pretty useful. Plenty of people like subscribing to content via email. You have a CMS that generates RSS from the content you create. An RSS-to-Email service can watch for new entries, format those new entries into an email, and send them out\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/cdn.ponies.what\/pony.jpg?resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/301933"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=301933"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/301933\/revisions"}],"predecessor-version":[{"id":302600,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/301933\/revisions\/302600"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/298713"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=301933"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=301933"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=301933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}