title: Padding for div inside of a div
body: <p>hey guys I am currently learning html and css I just wanted to ask that I have a div inside of a div . I Just want the outer div to have a background colour of Blue and the inner div to be 50px from top and left of outer div .dimensions of my inner div are 200px by 80px but when I try to apply padding for the inner div it just increases it's dimensions by 50 instead of spacing it from the outer div and keeps sticks to the edge of outer div.
  I also have an iframe inside of inner div if that may be the cause.</p>
  
  <p>HTML</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.contact {
    background-color: rgba(0, 102, 204,0.7);
    width: 100%;
    height: 300px;
    z-index: 2;
    padding: 50px;
  
  }
  .social {
    background-color: white;
    border-radius: 4px;
    width: 150px;
    height: 30px;
  
  }
  #fb {
    float: left;
    padding: 50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="contact"&gt;
    &lt;div class="social"&gt;
        &lt;iframe id="fb" src="Somelink" width="200" height="21" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"&gt;&lt;/iframe&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>