3

What is the difference between height="50" VS style="height:50px" ?

And height="50" VS style="height:50"?

I am always confused by this.

Igor Ivancha
  • 3,413
  • 4
  • 30
  • 39
Yan Shuang Low
  • 77
  • 9

2 Answers2

2

Presentation-related attributes such as height="50" where the original way to specify presentation details of HTML elements.

However, they have since been deprecated in favour of CSS, via the style, class and id attributes, which give a lot more flexibility that the original attributes (at the very least because CSS can be extended without touching the definition of HTML itself, but of course also because you get the "cascading" part, as well as multiple units, media-queries, and much more).

You should thus generally avoid such attributes in HTML.

The only exception is HTML in e-mail, as many clients support those attributes but not the CSS versions.

Note that you should generally avoid style attributes as well, in favour of separate CSS, and class and/or id attributes. This allows you to completely separate the HTML and CSS, and makes it easier to change the presentation of your page without touching the HTML (or the code that generates it).

Also, in CSS (and thus in style attributes), you must specify units (except for 0), so height: 50 is not valid, you should use height: 50px (or another unit).

jcaron
  • 17,302
  • 6
  • 32
  • 46
0

Using style attribute you add rich CSS to the element. Some styling can not be added using HTML attributes. For example <div style="background-color: #ff00ff; float: right"> is impossible with plain HTML attributes.

Travenin
  • 1,511
  • 1
  • 13
  • 24
  • 1
    he asked not is it rich element or no. He asked what the difference between *height="50"* and *style="height:50px"* – Khazratbek Jan 21 '16 at 08:36