title: How to make a h3 tag occupy less space within a div?
body: <p>Here is the HTML code:</p>
  
  <pre><code>    &lt;div id="homepage_boxes_holder"&gt;
          &lt;div class="homepage_boxes"&gt;
              &lt;h3 class="box_heading"&gt;Test&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="homepage_boxes"&gt;
              &lt;h3 class="box_heading"&gt;Test&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="homepage_boxes"&gt;
              &lt;h3 class="box_heading"&gt;Test&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS:</p>
  
  <pre><code>.homepage_boxes{
      width: 300px;
      height: 200px;
      float: left;
      margin-top: 100px;
      margin-right: 80px;
      margin-left: 150px;
      line-height: 10;
  }
  
  .box_heading{
      text-align:center;
      font-family: BebasNeue;
      font-size: 30px;
      padding: 0;
      margin: 0;
      border: 1px solid black;
  }
  </code></pre>
  
  <p>For some reason, the h3 is occupying a huge amount of space in the div (it looks as though the padding is huge to me but that can't be since I have set it to 0). I have put a border on the <code>.box_heading</code> for demonstrative purposes. Image is here:</p>
  
  <p>Link to image: <a href="http://imgur.com/vDs1KYs" rel="nofollow">http://imgur.com/vDs1KYs</a> <br /> -The blue is the div border, and the black is the H3 border.</p>
  
  <p>EDIT: If possible, I would also like the heading to be centred on the div, rather than pushing outside the boundaries.</p>