What's the Difference Between Width/Height in CSS and Width/Height HTML attributes?

Some HTML elements accept width and height as attributes. Some do not. For example:

<!-- valid, works, is a good idea -->
<img    style="max-width:90%"  style="max-width:90%" src="What's%20the%20Difference%20Between%20Width/Height%20in%20CSS%20and%20Width/Height%20HTML%20attributes?" alt="What's the Difference Between Width/Height in CSS and Width/Height HTML attributes?">
<iframe width="600" height="400" src="What's%20the%20Difference%20Between%20Width/Height%20in%20CSS%20and%20Width/Height%20HTML%20attributes?"></iframe>
<svg width="20" height="20"></svg>

<!-- not valid, doesn't work, not a good idea -->
<div width="40" height="40"></div>
<span width="100" height="10"></span>

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.

So, if CSS loads and has a declaration like:

img {
  width: 400px;
}

…that is going to override the width="500" on the tag above. Presentational attributes are the weakest kind of styling, so they are overridden by any CSS, even selectors with very low specificity.

What might be a smidge confusing is that presentational attributes seem like they would have high specificity. These inline styles, for instance, are very strong:

<img   style="max-width:90%" src="What's%20the%20Difference%20Between%20Width/Height%20in%20CSS%20and%20Width/Height%20HTML%20attributes?" alt="What's the Difference Between Width/Height in CSS and Width/Height HTML attributes?">

Using an inline style (which works on any element, not a select few), we’ve moved from the weakest way to apply width and height to one of the strongest. 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 rules.

img {
  width: 400px !important;
}

To reiterate, presentational attributes on elements that accept them (e.g. ,

But presentational attributes are also weak and are usually overridden in the CSS.

The above is the detailed content of What's the Difference Between Width/Height in CSS and Width/Height HTML attributes?. For more information, please follow other related articles on the PHP Chinese website!