title: Simple margin-top / margin-left trouble
body: <p>Enlighten me a question:</p>
  
  <p>If I put a div inside another, in this second div I can't use the properties <code>margin-left</code> and <code>margin-top</code> without changing the position of parent div?</p>
  
  <p>I need to use <code>padding</code> instead??</p>
  
  <p>EXEMPLE:</p>
  
  <p>FIDDLE WITH MARGINS: <a href="http://jsfiddle.net/zyEYj/1/" rel="nofollow">http://jsfiddle.net/zyEYj/1/</a></p>
  
  <p>FIDDLE WITHOUT MARGINS: <a href="http://jsfiddle.net/zyEYj/2/" rel="nofollow">http://jsfiddle.net/zyEYj/2/</a></p>
  
  <p>FIDDLE WITH PADDING INSIDE MOTHER DIV: <a href="http://jsfiddle.net/zyEYj/3/" rel="nofollow">http://jsfiddle.net/zyEYj/3/</a> (this is the final effect i want, but i need to use padding, and change the height of <code>#header</code>)</p>
  
  <p>codes:</p>
  
  <pre><code>&lt;div id="header" class="container"&gt;
      &lt;div class="logo"&gt;
          &lt;a href="index.asp"&gt;&lt;img src="imagens/logo.png" /&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>body{
  background:#d3f1fc;        
  }
  
  #header{
      height:135px;
      background:#ee4b14;
      padding-top:35px;
      padding-left:21px;
  }
  
  .container {
      margin:0 auto;
      width:960px;
  }
  
  .logo{
      width:382px;
      height:114px;
      background:#FFCC00;
  }​
  </code></pre>