title: Alternate for 'margin-top'? - CSS
body: <p>I'm trying to fit a few navigation tabs onto an <code>&lt;article&gt;</code> tab but it doesn't work properly on firefox and when on different screens, it messes up. Does anyone know an alternative that works with all browsers and doesn't change as the screen is resized?</p>
  
  <p>Here is the result I want:</p>
  
  <p><img src="https://i.stack.imgur.com/BgEXB.jpg" alt="http://i.imgur.com/nnonhm0.jpg"></p>
  
  <p>Exactly that except I don't want to use a fixed <code>margin-top</code></p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Code:</p>
  
  <p>Navigation:</p>
  
  <pre><code>nav {
      width: 100%;
      height: 4%;
  }
  
  nav ul {
      list-style-type: none;
  }
  
  nav li {
      width: 100%;
      background-color: #9A9489;
      display: inline-block;
      text-align: center;
      width: 11%;
      font: 1.4em/1.3em Bonveno, Open Sans, Sans-Serif;
      float: right;
      cursor: pointer;
      margin-right: 0.5%;
      border-top-left-radius: 0.3125em;
      border-top-right-radius: 0.3125em;
      transition: background-color 0.2s ease-in-out;
  }
  </code></pre>
  
  <p>Article (without margin-top):</p>
  
  <pre><code>article {
      width: 99.5%;
      margin-left: auto;
      margin-right: auto;
      box-shadow: 0 0.3125em 0 #9A9489;
      padding: 0 0 0.5% 1.5%;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;a href="contact.php"&gt;
              &lt;li&gt;Contact&lt;/li&gt;
          &lt;/a&gt;
  
          &lt;a href="pictures.php"&gt;
              &lt;li&gt;Pictures&lt;/li&gt;
          &lt;/a&gt;
  
          &lt;a href="about.php"&gt;
              &lt;li class="selected"&gt;About&lt;/li&gt;
          &lt;/a&gt;
  
          &lt;a link="black" href="index.php"&gt;
              &lt;li&gt;Home&lt;/li&gt;
          &lt;/a&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;article&gt;
  &lt;h1&gt;Hello World&lt;/h1&gt;
  
  &lt;p&gt;Hello world&lt;/p&gt;
  &lt;/article&gt;
  </code></pre>