Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

style width vs width attribute in HTML

I saw last post similar to my question HTML5 canvas style height vs attribute height
But in that post, there was no clear information regarding which one will work and what is the difference?

I tried following example:

<html>
    <head>
    </head>
      <body>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
        <script src="jquery-1.11.1.js"></script>
        <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
        <script src="script.js"></script>

        <div>
             <select style="width: 200px" width="200px">
                   <option value="Test1"> Test1 </option>
                   <option value="Test2"> Test2 </option>
                   <option value="Test3"> Test3</option>
                   <option value="Test4"> Test4 </option>
                   <option value="Test5"> Test5 </option>
             </select>
        </div>
     </body>
 </html>        

But in above example, if put either style="width: 200px" or width="200px", same result is not seen.

Question:
1) why are style="width: 200px and width="200px not giving same result?
2) what is the difference between width="200px" or width="200"?

Can some help me to clear these basics?

like image 734
Manku Avatar asked Oct 15 '14 02:10

Manku


People also ask

What is difference between style and attribute in HTML?

Definition and UsageThe style attribute specifies an inline style for an element. The style attribute will override any style set globally, e.g. styles specified in the <style> tag or in an external style sheet.

What is HTML style width?

The Style width property in HTML DOM is used to set or return the width of an element which can be block-level elements or elements with fixed position.

What is the value of width attribute?

The width attribute specifies the width of the <input> element. Note: The width attribute is used only with <input type="image"> . Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded.

What is the difference between width and style in HTML?

For most html elements, width attribute has nothing to do with the element's width. What defines an element's style (certainly contain width) is the element's style attribute. In other words, the style.width (style="width: 200px;") attribute determines the element's width.

What is the difference between the width attribute and style attribute?

For most html elements, width attribute has nothing to do with the element's width. What defines an element's style (certainly contain width) is the element's style attribute.

Why is the width attribute not allowed in HTML?

The width attribute is not a general attribute in HTML: it is allowed for a certain set of elements and defined individually for them. For most html elements, width attribute has nothing to do with the element's width. What defines an element's style (certainly contain width) is the element's style attribute.

Can the HTML <img> element have the CSS width/height attribute?

The HTML <img> element can have the width / height attribute, and it can also have the CSS width / height properties: What's the difference between the HTML attribute and CSS property and should they have the same effect?


2 Answers

For most html elements, width attribute has nothing to do with the element's width. What defines an element's style(certainly contain width) is the element's style attribute.

In other words, the style.width(style="width: 200px;") attribute determines the element's width.

But some elements like canvas, svg, the width attribute will determines the element's width, if you don't set style.width attribute. In this case, width="200px" is the same as width="200" because most browsers use the px as default unit.

PS:

  • The width is invalid to set the select's width.
  • But the width attribute is valid. You can access it and change it with freedom. You can use it to do other things.
like image 161
creeper Avatar answered Oct 21 '22 22:10

creeper


The width attribute is invalid in a select element. What matters more, this restriction is imposed by browsers: they ignore the attribute. (Long time ago, Netscape 4 supported it, and it was described in the HTML 3.0 draft, which expired in 1995. Some legacy code, maybe even legacy coding practices, may still reflect such things!)

So answer is simple: they differ so that the width attribute in HTML has no effect (so the element takes its default width), whereas the width property in CSS works in the normal CSS way.

The width attribute is not a general attribute in HTML: it is allowed for a certain set of elements and defined individually for them.

like image 44
Jukka K. Korpela Avatar answered Oct 21 '22 21:10

Jukka K. Korpela