3

I'm following this tutorial http://www.w3schools.com/css/tryit.asp?filename=trycss_float_elements.

Why do they specify the height and width inline when all pictures are set to be displayed as 110px x 90px in the CSS above?

TryinHard
  • 4,078
  • 3
  • 28
  • 54
user3247608
  • 583
  • 3
  • 9
  • 17
  • 3
    possible duplicate of [What's the difference between HTML's and CSS's width attribute?](http://stackoverflow.com/questions/20742675/whats-the-difference-between-htmls-and-csss-width-attribute) - I only just realized that quite a number of questions have been asked about this very example. – BoltClock Feb 11 '14 at 05:20
  • Another possible duplicate is here..and good anwser.. http://stackoverflow.com/a/640232/3222041 – newTag Feb 11 '14 at 05:24

5 Answers5

1

Basically the inline styles have more pririoty. In your case the class thumbnail has default 

height:90px
width:110px

And each image has different inline height and width and this will over-ride the stylesheet values. 

<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">

P.S : Linking to w3schools is highly frowned upon over here. Check w3fools.com

Roy M J
  • 6,926
  • 7
  • 51
  • 78
0

It should be defined inline. If you are using the img tag, that image should have semantic value to the content, which is why the alt attribute is required for validation. More explained answer here..(similar question) https://stackoverflow.com/a/640232/3222041

Community
  • 1
  • 1
newTag
  • 2,149
  • 1
  • 22
  • 31
0

Inline properties override the properties declared in the above class according to rules of inheritance. So if you do not/forget to specify the properties inline, the properties specified in class thumbnail will take over.

nsane
  • 1,715
  • 4
  • 21
  • 31
0

Well , this is just a tutorial , it won't affect much if you remove inline height and width perhaps you should avoid inline style these day but in some rare cases ( like when you make email templates , Some email clients do not allow styles in the head tg they are removed by most webmail clients. )

but i don't think so it was purposely , so forget it and use embedded and external style sheet if possible :)

Suraj Rawat
  • 3,685
  • 22
  • 33
0

You should have a css class specifying image dimension. In that tutorial the inline dimensions are redundant. The images renders exactly the same without the inline width and heights.

But if there is a case where you want to override the css class dimension with a different dimension, then you can use inline styles as they will override css styles.

One example: say you have a 90x110 image but you want to display them as 45x55 in one of your page. You can use inline style for them OR you can create another class to specify that dimension.

kheya
  • 7,546
  • 20
  • 77
  • 109