title: font-size is not working properly
body: <p>I am designing a layout of a website. But I notice that font-size is not working properly. I write a word "JETRO" inside a div. The height of div is 80px and font-size is 40px. I used "line-height:80px" to align the word middle from top to bottom. But its not working properly. It takes 25px from the top and 20px from the bottom and font size is showing 35px actually. What is wrong here? </p>
  
  <p>My html code: </p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
      &lt;html lang="en-US"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;PSD to HTML&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="style-blog.css" media="all" /&gt;
      &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          &lt;div id="leftRuler"&gt;
  
          &lt;/div&gt;
          &lt;div id="headerContent"&gt;
              &lt;div id="logo"&gt;
                  JETRO
              &lt;/div&gt;
              &lt;div id="menu"&gt;
                  MENU
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="rightRuler"&gt;
  
          &lt;/div&gt;
      &lt;/header&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And my CSS Code is:</p>
  
  <pre><code>body{
  margin: 0;
  padding: 0;
  font-family: bebas; 
  }
  
  header{
  width: 100%;
  height: 80px;
  background: #b9b9b9;
  background-color:#ffff99;
  }
  
  #leftRuler{
  width: 15%;
  height: 80px;
  float: left;
  }
  
  #headerContent{
  width: 70%;
  height: 80px;
  float: left;
  background: #99FFFF; 
  line-height: 80px; 
  }
  
  #rightRuler{
  width: 15%;
  right: 80px; 
  float: left;
  }
  
  #logo{
  height: 80px; 
  float: left;
  font-size: 40px; 
  display: block; 
  }
  
  #menu{
  float: right; 
  }
  </code></pre>