CSS

CSS – borderの位置を調整する

borderの線を位置調整したい場合paddingを使用することで実装可能です。ただ、線といってもborderで作成する線とアンカー要素などで使われるtext-decoration:underline;ではtext-underline-offsetを使うと線の位置を調整することができます。

borderの線を位置調整する

borderの線を位置調整する場合paddingが有効です。paddingというのは要素の内側の余白を調整することができますので今回の<h2>要素にborder-bottom:1px solid black;を適用した場合padding-bottom:1px;を使用することで線の位置を調整することができます。

サンプル

<h2>Sample.</h2>
h2{
  border-bottom:1px solid black;
  padding-bottom:1px;
}

注意点としては負の数値が使えないことです。線を要素に近づけたい場合はtext-underline-offsetを使うのが無難かと思います。

またborderにはtext-underline-offsetは使えないので注意が必要です。

text-underline-offsetを使った線を位置調整

前提としてtext-underline-offsetを使うにはtext-decoration:underline;を使用して線を作成している必要があります。

<a href="">sample</a>
a{
  text-decoration: underline black;
  text-underline-offset:4px;
}

こちらは負の数値を使用することはできますが文字にかぶるような位置に調整することはできないみたいです。文字と被る位置に配置するとunderlineが非表示になります。ただ、一定の数値を超える（文字のサイズを超える）とunderlineが文字の上に表示されるようになりますが、このような使い方をする人はほぼいないだろうと思います。