html - 具有行高/填充问题的标题的边框底部

Question

我遇到了一个问题，希望有人能够帮助我解决。

我有一个 h2 元素，我给了一个宽度，所以长标题分成两行。然后我想在文本中添加一个 border-bottom，而不是 block 元素，所以我将文本包装在 h2 元素内，并在我应用边框的范围内。像这样:

<h2><span>My headline that breaks into two lines</span><h2>

我的css是这样的:

h2 {
    width: 455px;
    height:170px;
    text-align: center;
    font-size: 67px;
    line-height: 90px;
    padding: 0;
    margin: 0;
    font-weight: normal;
}

h2 span {
    border-bottom: 2px solid blue;
}

一切都很好，除了我无法让我的边框更接近文本。无论我在 line-height 和 padding 中输入什么值，边框似乎都停留在文本下方 30px 左右。有没有人对我能做什么有任何聪明的想法？我觉得我已经尝试了所有可能的组合。

非常感谢您。

Answer 1

html:

<div class="demo">
    <h2>
      <span>My headline that breaks into two lines</span>
    </h2>
  </div>

CSS:

.demo {
    width: 455px;
    height:170px;
    text-align: center;
}

h2 { 
    border-bottom: 1px solid red;
    display : inline;
    line-height: 90px;
    padding: 0;
    margin: 0;
    font-weight: normal;
}

h2 > span {
  font-size: 67px;
  line-height: normal;
}

演示 http://codepen.io/gauravsam/pen/PZQwNz