Menu
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?
659
The width CSS property sets an element's width. By default, it sets the width of the content area, but if box-sizing is set to border-box , it sets the width of the border area.
The width attribute specifies the width of the element, in pixels.
HTML Vs. CSS. HTML is a markup language used to create static web pages and web applications. CSS is a style sheet language responsible for the presentation of documents written in a markup language.
The width property in CSS specifies the width of the element's content area. This “content” area is the portion inside the padding, border, and margin of an element (the box model). In the example above, elements that have a class name of . wrap will be 80% as wide as their parent element.
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 As always, Alohci is in a better position to explain why the 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.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.
189
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.
41
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
