Question

以下是HTML代码：

    <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>

这是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;
}

出于某种原因，h3在div中占用了大量的空间（看起来填充对我来说很大，但是因为我把它设置为0所以不可能）。为了示范目的，我在.box_heading放了一个边框。图像在这里：

链接到图片：http://imgur.com/vDs1KYs
- 蓝色是div边框，黑色是H3边框。

编辑：如果可能的话，我也希望标题以div为中心，而不是超越界限。

Answer 1

这是因为您在父元素中添加了line-height: 10;，这会增加每行 10次的高度。

只需删除它即可。

<强> Working fiddle

更新

要将h3元素保留在其父级的中间，您可以将line-height设置为该元素的父级height（在这种情况下，您可以将此CSS声明应用于父和 h3 元素）。

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

<强> Udpated Fiddle

另一个选项是将相同的padding设置为父元素的顶部和底部，而不设置固定的height，这会使孩子在中间。

<强> JSFiddle Demo

Answer 2

只需将其添加到h3：

line-height: 1em;

http://jsfiddle.net/B7ZTw/

要将文本双向居中，请将以下内容添加到h3：

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

你在这里做的是：将h3从顶部设置为50％（因此在中间），但是然后减去元素高度的一半，这样它就不会以50％开始，而是在那里居中。

见这里：http://jsfiddle.net/B7ZTw/2/

Answer 3

只需添加line-height：1em;到.box-heading类描述。 line-height属性改变字体的“上升”或“上升高度”，使其变高。

Answer 4

如果可能，您可以设置静态高度

如何使一个h3标签在div中占用更少的空间？

4 个答案:

更新