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?
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.
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.
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.
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.
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.
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.
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?
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:
width
is invalid to set the select
's width.width
attribute is valid. You can access it and change it with freedom. You can use it to do other things. 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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With