11

The codes can be found here:

http://www.w3schools.com/css/tryit.asp?filename=trycss_float_elements

<!DOCTYPE html>
<html>
<head>
<style>
.thumbnail 
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>

<body>
<h3>Image Gallery</h3>
<p>Try resizing the window to see what happens when the images do not have enough room.</p>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
</body>
</html>

I find that there is width:110px; within style tag, and there is also width="107" within img tag. Are both of them necessary?(It seems that the CSS overwrites HTML attributes in this case) Is there any explaination about the difference between them?

Jake
  • 948
  • 8
  • 19
Hanfei Sun
  • 45,281
  • 39
  • 129
  • 237
  • 13
    If the code comes from W3Schools, assume witchcraft. – BoltClock Dec 23 '13 at 11:34
  • Actually none of them is necessary. – VisioN Dec 23 '13 at 11:34
  • Did you consider looking at [the CSS](http://www.w3.org/TR/CSS2/) and [HTML](http://www.w3.org/TR/html5/) specifications? – T.J. Crowder Dec 23 '13 at 11:35
  • 3
    _"What's the difference?"_ - One difference is that CSS allows you to specify units other than pixels, e.g., `width: 15em;` or `width: 10cm;`. – nnnnnn Dec 23 '13 at 11:35
  • http://www.w3fools.com/ – emerson.marini Dec 23 '13 at 11:36
  • @T.J.Crowder I checked the documents, but they don't make clear what will happen if both of them are set.. – Hanfei Sun Dec 23 '13 at 11:36
  • Please refer the link: [http://stackoverflow.com/questions/640190/image-width-height-as-an-attribute-or-in-css][1] [1]: http://stackoverflow.com/questions/640190/image-width-height-as-an-attribute-or-in-css – Manoj Dec 23 '13 at 11:38
  • @ Firegun: Fair enough. @CosLu: Do you have a reference for that? – T.J. Crowder Dec 23 '13 at 11:38
  • @coslu I don't agree it can be css also if we have added `!important` – Just code Dec 23 '13 at 11:38
  • http://www.w3.org/TR/CSS21/cascade.html#preshint – Quentin Dec 23 '13 at 11:41
  • A remarkable difference is, that [`width` and `height`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#Attribute_list) attributes are obsoleted within some elements, and have no effect on those elements. For example [`div`](http://jsfiddle.net/C5bjR/). – Teemu Dec 23 '13 at 11:57
  • @Teemu - Note that MDN note is partially incorrect. `width` and `height` have never been either valid or functional attributes of `
    ` elements. They has been obsoleted from other elements though, e.g ``.
     – Alohci Dec 23 '13 at 12:19
  • @Alohci They used to work with absolutely positioned divs, though I somehow managed to tumble that detail in my fiddle : ). – Teemu Dec 23 '13 at 12:24

7 Answers7

22

I checked the documents, but they don't make clear what will happen if both of them are set..

That's hidden away somewhere here:

The UA may choose to honor presentational attributes in an HTML source document. If so, these attributes are translated to the corresponding CSS rules with specificity equal to 0, and are treated as if they were inserted at the start of the author style sheet. They may therefore be overridden by subsequent style sheet rules. In a transition phase, this policy will make it easier for stylistic attributes to coexist with style sheets.

Now, as I've implied in my humorous comment, I don't know for certain why they would set a variety of values for the HTML width attribute on the img elements and have a single, different value for the CSS width property for all of them. Perhaps they're accounting for when the .thumbnail class is missing, or something else. As always, Alohci is in a better position to explain why the width and height attributes are specified anyway, even if they differ from the dimensions specified in CSS for whatever reason.

What I can tell you, however, is that this basically means the CSS does indeed take precedence anyway, even if both are set.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 2
    +1 for clarifying with citation that CSS width/height take precedence over the equivalent HTML attributes. [CSS-Tricks](https://css-tricks.com/whats-the-difference-between-width-height-in-css-and-width-height-html-attributes/) also has a good explanation. – Jake Dec 19 '20 at 00:28
10

The widths given in the markup are semantic statements about how large the image is. For that reason, in HTML5 it is only valid to give the dimensions in pixels.

The widths given in the CSS are directives to the layout engine as to how much space to use when put the images on screen. They can be in any standard CSS units

See BoltClock's answer for how they interact when laying the page out.

Alohci
  • 78,296
  • 16
  • 112
  • 156
3

Regarding the question in the title, it is easier to say what they have in common: just that they both affect the width of the image, and they have the same name. The HTML width attribute is governed by general rules on HTML attributes, it is limited syntax of values (only unsigned integers and percentages), it creates a width property to the element node, etc. In contrast, the CSS width property (not attribute) is governed by CSS syntax rules, it many different types of values permitted, it creates an entry in the relevant style sheet node in the DOM (but not directly a property of an element), etc. Moreover, an HTML attribute needs to be set separately for each element, whereas a style sheet can set a property on many elements at a time (even on all elements of a document).

Regarding to the question “are both of them necessary?”, it depends. Usually authors specify the width of an image either in HTML or in CSS, not both. It is, however, valid and sometimes useful to use both. In the given case, the actual dimensions of the images seem to match the HTML attributes, so the CSS settings cause them to be rescaled (without preserving the width:height ratio); this is bad practice, but what can you expect from w3schools? (The images should normally be scaled to the intended size and uploaded in that size, if they are to be shown in some fixed size.) – The explanation to the mess is most probably just sloppyness.

It can still be meaningful to use both HTML and CSS to set the width. For example, you could set the width in CSS in em units to make it scale to the font size but also specify the width in HTML (in pixels) as a fallback, just in case CSS isn’t enabled. (It makes more sense to do this for height than width, though.)

Informally speaking, CSS overwrites HTML in cases like this. But HTML isn’t really overwritten. The attributes are still there, they just don’t take effect – when CSS is enabled. All the relevant specifications and drafts agree on this. In HTML5 CR, clause 10.4.3, this is specified so that the width attributes are “presentational hints”, which means that they are “author-level zero-specificity presentational hints part of the CSS cascade”. So any CSS rule that sets the property will “win”, no matter how low the rule is in the cascading order.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
2

In the case of images or the canvas element, using CSS to set dimensions changes the element (how it appears on screen) without changing the underlying bitmap (the same number of pixels are still used, but distorted to fit the CSS-specified dimensions), whereas using the HTML tag to set dimensions actually specifies the number of pixels to set for the element.

passpi
  • 21
  • 1
0

It's depends from browser engine, but difference is about this:

If the part of HTML page with image is visible.

Then you add width and height attributes to img tag the browser will know some(not final) image size before image is loaded and will add it native cap for images with images size. So browser will add some space(for image) on HTML page.

If the part of HTML page with image is not visible.

Then you add width and height attributes to img tag the browser will know some(not final) image size before image is loaded and can calculate for example offsetWidth or offsetHeight of image container right. Also width/height attributes will save you from image HTML container repaint if you don't crop image from css, because browser already add some space for image.

Alex
  • 11,115
  • 12
  • 51
  • 64
0

first see this demo

Notice the border given to the images,in the last case, the border has been set inline and it shows the inline border-color but in case of the width, its taking the one set in css and not the inline.

So as mentioned in the link provided by the BOLTCLOCK, i assume it all depends on the selector's specificity

NoobEditor
  • 15,563
  • 19
  • 81
  • 112
0

In that link the css width is overriding the html width attribute. this is what happens when you assign multiple property to same element. higher priority value will override the lower priority. class selector have higher priority then tag selector.

shubendrak
  • 2,038
  • 4
  • 27
  • 56