title: Create space between the inside element and the outside one
body: <p>I'm a HTML beginner and I'v known that padding is the space between the content and the border, whereas margin is the space outside the border. </p>
  
  <p>So if I want to create some space between the inside element and the outside one - like the effect I want from <a href="https://i.stack.imgur.com/fYhj7.png" rel="nofollow noreferrer"> pic1 - original status</a> to <a href="https://i.stack.imgur.com/l8RqL.png" rel="nofollow noreferrer"> pic2 - excepted result </a>, it's supposed to put <code>padding-top: 100px;</code> on the outside element  instead of put <code>margin-top: 100px;</code> on the inside element. </p>
  
  <p>So, my question is, when I put <code>margin-top: 100px;</code> on the inside element can't create space(<a href="https://i.stack.imgur.com/fYhj7.png" rel="nofollow noreferrer"> pic3 - no effect css setting </a> ) but why when I put <code>margin-top: 300px;</code> on the outside element can create space between body and the outside element ? </p>
  
  <p>and then I tried putting both <code>padding-top: 100px;</code> on the outside element and <code>margin-top: 100px;</code> on the inside element, and I got a surprised result(<a href="https://i.stack.imgur.com/AkS9o.png" rel="nofollow noreferrer"> pic4 - surprised result </a>), that <code>margin-top: 100px;</code> on the inside element works again! So what concept or detail I still don't understand, can anyone tells me ?  by the way, this is the first time I ask question on stackoverflow :)</p>
  
  <p><a href="https://i.stack.imgur.com/fYhj7.png" rel="nofollow noreferrer"> pic1 - original status</a></p>
  
  <p><a href="https://i.stack.imgur.com/l8RqL.png" rel="nofollow noreferrer"> pic2 - excepted result </a>
  put <code>padding-top: 100px;</code> on the outside element</p>
  
  <p><a href="https://i.stack.imgur.com/fYhj7.png" rel="nofollow noreferrer"> pic3 - no effect css setting </a> 
  put <code>margin-top: 100px;</code> on the inside element</p>
  
  <p><a href="https://i.stack.imgur.com/AkS9o.png" rel="nofollow noreferrer"> pic4 - surprised result </a>
  put both <code>padding-top: 100px;</code> on outside element 
  and <code>margin-top: 100px;</code> on inside element</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="center outside"&gt;
          &lt;div class="center inside"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur modi repellendus, aliquam impedit! Harum autem repellat voluptate sint assumenda nam illo! Voluptatibus amet, porro dolor. Nostrum, eaque, ad. Iste nesciunt reprehenderit quaerat officia facilis a libero fugit minus modi quia. Voluptatum similique sapiente voluptatem iure amet ea perspiciatis est. Tempora.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur modi repellendus, aliquam impedit! Harum autem repellat voluptate sint assumenda nam illo! Voluptatibus amet, porro dolor. Nostrum, eaque, ad. Iste nesciunt reprehenderit quaerat officia facilis a libero fugit minus modi quia. Voluptatum similique sapiente voluptatem iure amet ea perspiciatis est. Tempora.&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS of pic 1</p>
  
  <pre><code>.center {
      margin: 0 auto;
  }
  
  .outside {
      margin-top: 300px;
      width: 30%;
      background-color: coral;
  }
  
  .inside {
      padding: 20px;
      width: 80%;
      background-color: aquamarine;
  }
  </code></pre>
  
  <p>CSS of pic 2</p>
  
  <pre><code>.center {
      margin: 0 auto;
  }
  
  .outside {
      margin-top: 300px;
      padding-top: 100px;
      width: 30%;
      background-color: coral;
  }
  
  .inside {
      padding: 20px;
      width: 80%;
      background-color: aquamarine;
  }
  </code></pre>
  
  <p>CSS of pic 3</p>
  
  <pre><code>.center {
      margin: 0 auto;
  }
  
  .outside {
      margin-top: 300px;
      width: 30%;
      background-color: coral;
  }
  
  .inside {
      margin-top: 100px;
      padding: 20px;
      width: 80%;
      background-color: aquamarine;
  }
  </code></pre>
  
  <p>CSS of pic 4</p>
  
  <pre><code>.center {
      margin: 0 auto;
  }
  
  .outside {
      margin-top: 300px;
      padding-top: 100px;
      width: 30%;
      background-color: coral;
  }
  
  .inside {
      margin-top: 100px;
      padding: 20px;
      width: 80%;
      background-color: aquamarine;
  }
  </code></pre>