How to make a h3 tag occupy less space within a div?

Question

Here is the HTML code:

    <div id="homepage_boxes_holder">
        <div class="homepage_boxes">
            <h3 class="box_heading">Test</h3>
        </div>
        <div class="homepage_boxes">
            <h3 class="box_heading">Test</h3>
        </div>
        <div class="homepage_boxes">
            <h3 class="box_heading">Test</h3>
        </div>
    </div>

Here is the CSS:

.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;
}

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 .box_heading for demonstrative purposes. Image is here:

Link to image: http://imgur.com/vDs1KYs
-The blue is the div border, and the black is the H3 border.

EDIT: If possible, I would also like the heading to be centred on the div, rather than pushing outside the boundaries.

Answer 1

That's because you added a line-height: 10; to the parent element, which increases the height of each line 10 times.

Just remove that And it works.

Working fiddle

Update

To keep the h3 element at the middle of its parent, you could set a line-height as the parent's height to that element (in this case you could apply this CSS declaration to both parent and h3 element).

.homepage_boxes {
    /* ... */
    line-height: 200px;  /* as the same of the parent's height */
}

Udpated Fiddle

Another option is setting the same padding to the top and bottom of the parent element without setting a fixed height, which makes the children at the middle.

JSFiddle Demo

Answer 2

just add line-height: 1em; to the .box-heading class description. The line-height attribute alters the 'ascent' or 'ascender height' of the font, making it that high.

Answer 3

Just add this to the h3:

line-height: 1em;

http://jsfiddle.net/B7ZTw/

---

To center the text both ways please add the following to h3:

position: relative;
top: 50%;
margin-top: -0.5em;

What you do here is: set the h3 to be 50% from the top (so the middle), but then substract half of the element height so it doesn't start at 50% but is centered there.

See here: http://jsfiddle.net/B7ZTw/2/

Answer 4

You can put static height for if it possible