ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS でテキストと下線の間のスペースを増やすにはどうすればよいですか?

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

Barbara Streisand
リリース: 2024-11-25 02:03:09
オリジナル
360 人が閲覧しました

How Can I Increase the Space Between Text and an Underline in CSS?

CSS でテキストと下線の間のスペースを拡張する

Web スタイルの領域では、CSS を使用してテキストを下線で装飾できます。 「text-decoration:underline」プロパティ。ただし、下線付きのテキストと実際のテキストの間のギャップを拡大したい場合は、CSS を直接変更するだけでは十分ではない可能性があります。

解決策:

希望の間隔を実現するには、下線を、padding-bottom を伴う border-bottom に置き換えることを検討してください。このテクニックにより、間隔を正確に制御でき、「下線」の色を操作できるようになります。

実装:

  1. 単一の場合line text: 「border-bottom: 1px Solid #000」と「padding-bottom:」を使用します。 3px';
  2. 多色の「下線」の場合: 'border-bottom' の色の宣言を省略します (例: 'border-bottom-width: 1px; border-bottom-style: Solid) ;');
  3. 複数行テキストの場合: 複数行テキストを親要素内の「span」要素。次に、「border-bottom」と「padding-bottom」を「span」に適用します。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート