title: HTML & CSS - Text stick to bottom of div?
body: <p>I am making a "Starcraft II" website for my clan. And I want the navigation bar to contain the text "ALLOYE" and stick to the bottom of the navigation bar. I have tried this code: </p>
  
  <pre><code>vertical-align:text-bottom;
  </code></pre>
  
  <p>But the text seems to say about 10 pixels over the bottom. Is it becouse some hidden border or something?
  This is my total HTML code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="main.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="nav"&gt;
              &lt;div class="title"&gt;
                  &lt;strong&gt;ALLOYE&lt;/strong&gt;
              &lt;/div&gt;
       &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is the CSS code:</p>
  
  <pre><code>body{
      margin: 0; padding: 0;
      color: #fff;
      font-family: "Segoe UI",Arial,Sans-Serif;
  }
  .nav{
      position: absolute;
      width: 100%;
      height: 7%;
      background: -webkit-linear-gradient(#FFB441, #FF9A00);
      background: -o-linear-gradient(#FFB441, #FF9A00);
      background: -moz-linear-gradient(#FFB441, #FF9A00);
      background: linear-gradient(#FFB441, #FF9A00);
  }
  .title{
      position: relative;
      vertical-align:text-bottom;
      font-size: 65px;
   }
  </code></pre>