title: How do I set a top margin inside of a box in css?
body: <pre class="lang-css prettyprint-override"><code>.box {
      width: 800px;
      height: 450px;
      background: rgb(0, 0, 0);
      margin: 100px auto 100px auto;
      position: relative;
  }
  
  .header {
      text-align: center;
      color: rgb(26, 175, 212);
      display: inline;
      margin: 500px;
  }
  </code></pre>
  
  <p>I'm not sure if it has something to do with box being the parent class but I tried doing this:</p>
  
  <pre class="lang-css prettyprint-override"><code>.box header {
      text-align: center;
      color: rgb(26, 175, 212);
      display: inline;
      margin: 500px;
  }
  </code></pre>
  
  <p>but the header would be completely gone.</p>
  
  <p>I also tried setting a top margin and setting display:inline-block based on what others have suggested but it completely gets rid of the header.</p>