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: https://i.stack.imgur.com/65R0s.jpg
-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.

`line-height: 10;` is what's causing it just take it away. – Ruddy Jan 24 '14 at 08:32 — Ruddy, Jan 24 '14 at 08:32

Hashem Qolami · Accepted Answer · 2014-01-24T08:39:20.073

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

edited Jan 24 '14 at 08:39

answered Jan 24 '14 at 08:32

Hashem Qolami

97,268
26
150
164

Thank you I see that now. However the reason I added the line height was to try and have the h3 in the centre of the div, do you know how to do that without causing what I caused in the original post? – k4kuz0 Jan 24 '14 at 08:34

spiel · Answer 2 · 2014-01-24T08:38:39.917

0

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/

edited Jan 24 '14 at 08:38

answered Jan 24 '14 at 08:24

spiel

347
3
15

Thanks! This seems halfway there, problem is that I want the text to be in the centre of the Div, but not push itself outside of the div boundaries. Is that possible? – k4kuz0 Jan 24 '14 at 08:33
@k4kuz0 Just for your information: your chosen answer does not work without problems if you want to keep the 200px height and add text after the h3. Example just in case you need it: http://jsfiddle.net/B7ZTw/5/ – spiel Jan 24 '14 at 08:52

score 0 · Answer 3 · answered Jan 24 '14 at 08:31

0

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.

answered Jan 24 '14 at 08:31

Haroldchen

199
7

score -1 · Answer 4 · answered Jan 24 '14 at 08:23

-1

You can put static height for if it possible

answered Jan 24 '14 at 08:23

htmlDaddy

1

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

4 Answers4

Update