html - h1のボーダーボトムを近づける

Question

これは私のHTMLです:

<header>
    <hgroup>
        <h1><span>GUITARRA</span></h1>
        <h2>Profesor</h2>
    </hgroup>
</header>

これは私のCSSです（*ルールを追加）：

*{
    padding: 0; margin: 0;
    font-size: 18px;
    font-family: arial;
}

header h1{
    font-size: 42px;
}

header h1 span{
    border-bottom: 3px solid red; 
    font-size: inherit;
}

ここでの問題は、「下線」効果をこれよりも近くに適用したいということです:

そして、これにより近いということは、つまり...：

使用するtext-decoration: underlined;と、線はより近くなりますが、非常に細い線になります。これは、望ましい効果ではありません。

それを行う方法はありますか？

編集

jsフィドル

Answer 1

下線の位置を完全に制御したい場合は、これを試してください。

header h1 {
    font-size: 42px;
}
header h1 span {
    font-size: inherit;
    position: relative;
}
header h1 span:before {
    content: '';
    border-top: 3px solid red;
    font-size: inherit;
    position: absolute;
    width: 100%;
    bottom: 6px;
}

疑似要素を追加して下線を作成し、絶対配置を使用して垂直方向の配置を調整します。

デモを参照してください: http://jsfiddle.net/audetwebdesign/Xsk4R/

Answer 2

これを試して：

実施例

header h1 span {
    display: inline-block;
    border-bottom: 3px solid red;
    font-size: inherit;
    height: 40px;
}

高さを調整して、必要に応じて下線を上下に移動します。

Answer 3

パディングが 0 に設定されている場合、 h1 の行の高さがギャップを作成していると思います。行の高さを減らしてみてください (おそらく、適切に見えるものを選択する必要があります)。必要な場所に下線を引くことができるはずです。

Answer 4

タグに a を設定line-heightしますh1

デモhttp://jsfiddle.net/kevinPHPkevin/CUhXp/

line-height: 30px;

Answer 5

使用する：

padding-bottom:0px;

h1で。

自動パディングがあるので、これで取り除かれます。