title: Why can't I override an img inside a div?
body: <p>I've been spending a couple of hours and can't seem to figure this out. I have a html tree similar to this:</p>
  
  <pre><code>&lt;div class="region"&gt;
    &lt;div class="area" id="one"&gt;
      &lt;img src="..." /&gt;
      &lt;span&gt;...&lt;/span&gt;
  ...
  </code></pre>
  
  <p>Then my css has:</p>
  
  <pre><code>.region {
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    width: 80%;
  }
  
  .area {
    display: inline-block;
    text-align: center;
    width: 25%;
  }​
  
  .area img {
    border: 1px solid green;
    margin: 0;
  }
  </code></pre>
  
  <p>The problem is that for some reason I can't seem to be able to override img inside the area class. When I look into firebug I only see a global img being applied (display: inline-block) and nothing else. </p>
  
  <p>The interesting thing is that replacing the "img" for "span" in the css does override it! How can this happen? Tested for typos, etc. but I can't seem to figure this out.</p>
  
  <p>Any tip greatly appreciated!</p>