CSS and images - why picture isn't resized

Why when I want to resize div, image in div doesn't change its size !? It's CASCADE style sheets, isn't it?

--EDIT--

.box{padding:0px;margin-left:10px;display:inline-block;margin-right:auto;width:20px;height:20px;border:1px solid red;}

&l开发者_Python百科t;div class="box">
<img src="larrow.gif"/>
</div>

---

It's cascade, but width and height are not inherited.

You might want to do something to make the image follow the size of its parent.

Like

div.box img { width: 100%; height: 100%; }

---

<img> tags have an implicit width of either the image's natural width or the width attribute of the tag that must be overriden with css. Try this to make the image 100% of the width of its parent <div>:

div img{
    width: 100%;
}

I think you have a bit of a misunderstanding of what cascading actually is. I'd recommend reading the part of the spec that deals with the cascade.

---

Your style selector only matches elements with the class box. The div has that class, but the img doesn't. Thus, the div has the style applied and the img doesn't. Try:

.box
{
  padding:0px;
  margin-left:10px;
  display:inline-block;
  margin-right:auto;
  border:1px solid red;
}
.box, .box img
{
  width:20px;
  height:20px;
}

<div class="box">
  <img src="larrow.gif"/>
</div>