CODEWITHSUNDEEP
htmlcss
Hanfei Sun
Hanfei Sun

Reputation: 47051

What's the difference between HTML's and CSS's width attribute?

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?

Upvotes: 12

Views: 6225

Answers (7)

passpi
passpi

Reputation: 21

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.

Upvotes: 2

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

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.

Upvotes: 3

shubendrak
shubendrak

Reputation: 2068

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.

Upvotes: 0

BoltClock
BoltClock

Reputation: 723668

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.

Upvotes: 23

NoobEditor
NoobEditor

Reputation: 15891

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

Upvotes: 0

Alohci
Alohci

Reputation: 82986

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.

Upvotes: 10

Alex
Alex

Reputation: 11245

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.

Upvotes: 0

Related Questions