title: Difference in `width` and `height` default settings
body: <p>For the default settings in my browser, <code>width</code> gets the default value <code>100%</code> and <code>height</code> get the default value <code>auto</code>.</p>
  
  <p>As known, the default effects vertically and horisontally are very different. The width of the box (a <code>&lt;div&gt;</code> e.g., but the element used will of course change the result) will then be 100% of the surrounding container block element as default. And the height will apparently equal the text height.</p>
  
  <p>But if I set <code>width: auto;</code>, meaning that both <code>width</code> and <code>height</code> now have the same value <code>auto</code>, then the effects are still very different (and in fact there is no difference for the width).</p>
  
  <p>(I use newest version of Google Chrome on Windows 7, but that doesn't make any big difference - the browsers aren't that different here.)</p>
  
  <p>My question here is, how come there is such a difference in these two very alike proporties <code>width</code> and <code>height</code>? Such a big difference that the value <code>auto</code> gives a very different result from the two?</p>
  
  <p>It is quite exhausting to obtain the same effects as the default effects from one on the other element. That is, it is quite hard and needs extra work / workarounds to obtain the effect of a 100% height as well as the effect of a width that fits to the text width. What I'm looking for is to understand these two proporties and their <code>auto</code> value better. I'f you guys have some good sources and links, I would be glad.</p>