从div底部删除填充文本中的文本

Question

我正在使用twitter-bootstrap，我所拥有的只是一个带有一些文本的div到目前为止，但我似乎无法弄清楚如何从底部取下填充。我试过padding-bottom:0px;，但没有做任何事情。理想情况下，我想改变我的元素：

到此：

<div class="container-fluid">
    <div class="row header text-center">
        <div class="col-xs-12 title">
            Text
        </div>
    </div>
    <div class="row">

    </div>
</div>

如何摆脱绿色元素（.header）的底部？

.header {
    background:green;
}

.title {
    color:white;
    font-size:600%;
}

Answer 1

那个空间没有填充;它属于具有下划线的小写字母，如（qypj）。

解决方法是将文本换行<span>

<div class="col-xs-12 title">
    <span>Text</span>
</div>

然后垂直对齐<span>元素，如下所示：

<强> EXAMPLE HERE

.title { font-size: 3em; }

.title span {
    height: 1em; /* 1em is equal to the font-size of the parent which is 3em */
    display: inline-block;
    vertical-align: bottom;
}

Answer 2

太多的HTML来完成一件简单的事情。

DEMO：http://jsbin.com/cadil/1/edit

HTML

  <div class="my-title">
          <span>Text</span>
  </div>

CSS

.my-title {
    background: green;
    font-size: 30px;
    color: #fff;
    text-align: center;
}
.my-title span {
    padding-top: 15px;
    display: block;
    line-height: .65;
    position: relative;
}