Question

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

我有和h2元素，我给了一个宽度，所以长标题分为两行。然后我想在文本中添加边框底部，而不是块元素，所以我将文本包装在我应用边框的范围内的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;
}

一切都很好，除了我不能让我的边界更接近文本。无论我在行高和填充中放置什么值，边框似乎都会粘在文本下方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;
}

demo http://codepen.io/gauravsam/pen/PZQwNz

Answer 2

添加padding-bottom：10px; demo

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;
    padding-bottom:10px;/*add this*/
}

Answer 3

在我的example中你会看到，通过在h2相对线上设置线高，跨度位于下降线下方（例如字母y），边界现在比你拥有它更接近基线？

h2 {
    text-align: left;
    width: 400px;
    font-size: 40px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    line-height: inherit;
}

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

带有行高/填充问题的标题上的边框底部

3 个答案: