title: Why css margins don't work?
body: <p>I have been struggling with this annoying piece of code. You'd think I'd had enough practice with css, but as always, it is temperamental with me.</p>
  
  <p>My problem is as follows, I have the following css:</p>
  
  <pre><code>.FORM ul li label {
      margin-top: 50px;    //&lt;--------------THE PROBLEM
      height: 20px;
      max-height: 20px;
      width: 100px;
      min-width: 100px;
  }
  .FORM ul li {
      list-style: none;
      width: 500px;
      height: 100px;
      min-width: 500px;
      min-height: 100px;
      background: #ddd;
      border-top: #eee 1px solid;
      border-bottom: #bbb 1px solid;
      padding: 10px 10px;
      margin: auto;
  }
  ul {
      background: #ccc;
      padding: 10px 10px 10px 10px;
      width: 530px;
      margin: auto;
  }
  body {
      background: #cfc;
      padding: 0px;
      margin: 0px;
  }
  .FORM {
      background: #fcc;
  }
  </code></pre>
  
  <p>the html it controls is:</p>
  
  <pre><code>&lt;form class="FORM"&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;label for="workersAddr"&gt;Worker's Address:&lt;/label&gt;
              &lt;input type='text' id='workersAddr' class='validate[required,minSize[5]]'/&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>notice how in the image below the <code>margin-top: 50px;</code> have no effect at all?</p>
  
  <p><img src="https://i.stack.imgur.com/7mytb.png" alt="enter image description here"></p>
  
  <p>how do I solve this issue?</p>