What's the difference between HTML's and CSS's width attribute?

user_1272683 0
Viewed 5207

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?

css html
7 Answers

In the case of images or the canvas element, using CSS to set dimensions changes the element (how it appears on screen) without changing the underlying bitmap (the same number of pixels are still used, but distorted to fit the CSS-specified dimensions), whereas using the HTML tag to set dimensions actually specifies the number of pixels to set for the element.

user_125355190
Related