title: How to margin div inside other div?
body: <p>html body,simple form with table and two divs inside(login and table):</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="container"&gt;
          &lt;form&gt;
              &lt;div class="login"&gt;
                  &lt;div class="table"&gt;
                      &lt;table class="userInput"&gt;
                          &lt;tr&gt;
                              &lt;td&gt;&lt;input type="text" placeholder="Username" id="username"
                                  name="login"&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;&lt;input type="submit" value="submit"&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>My css:</p>
  
  <pre><code>html,body {
      margin: 0;
      padding: 0;
      height: 100%;
  }
  
  table.userInput {
      margin-top: 15%;
      width: 100%;
      height: 100%;
  }
  
  div#container {
      background: pink;
      height: 100%;
  }
  
  div.login {
      background-color: black;
      margin-top: 15%;
      margin-left: auto;
      margin-right: auto;
      height: 10%;
      width: 10%;
      padding: 10px;
  }
  
  div.table {
      width: 100%;
      height: 100%;
      background-color: grey;
  }
  </code></pre>
  
  <p>Need my <code>div class="table"</code> after <code>margin-top:15%</code> of <code>table class="userInput"</code> visible with grey background but after offset i can see black color of login <code>div class="login"</code>. How to make it grey with margin-top?<img src="https://i.stack.imgur.com/iQzJC.png" alt="enter image description here"></p>