CSS で下線付きのテキストと下線の間のスペースを増やすにはどうすればよいですか?

CSS を使用して下線のギャップを強調する

テキストとその下線を視覚的に区別することは、読みやすさにとって不可欠です。 CSS はテキストに下線を追加する text-decoration:underline プロパティを提供しますが、テキストと線の間のギャップを調整する直接的な方法は提供しません。

代替ソリューション

代わりに、solid スタイルとゼロ以外の幅を持つ border-bottom プロパティを採用することを検討してください。これにより、テキストの下に境界線が作成され、事実上下線を模倣します。さらに、padding-bottom を適用すると、テキストと境界線の間の垂直方向のスペースが増加し、隙間が大きくなったように見えます。

たとえば、次のコード サンプルは、テキストの下に 1 ピクセルの黒い境界線を 3 ピクセルのパディングで確立します。その下:

border-bottom: 1px solid #000;
padding-bottom: 3px;

色のカスタマイズ

境界線の色を希望する場合テキストの色と一致させるには、色の宣言を省略するだけで、border-bottom-width: 1px および border-bottom-style: Solid になります。

複数行テキストの処理

複数行のテキストの場合は、メイン要素内にネストされたspan要素内でテキストをラップします。次に、border-bottom プロパティとpadding プロパティをspan要素に適用します。この手法は、複数行のシナリオでテキストと下線の間のギャップを効果的に拡張します。

以上がCSS で下線付きのテキストと下線の間のスペースを増やすにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。