ホームページ >ウェブフロントエンド >フロントエンドQ&A >HTMLで水平線とテキストの間の距離を設定する方法

HTMLで水平線とテキストの間の距離を設定する方法

青灯夜游
青灯夜游オリジナル
2021-06-08 16:22:063668ブラウズ

HTML では、水平線タグの style 属性を使用してマージン スタイルを追加することで、水平線とテキストの間の距離を設定できます。マージンのスタイルは、margin、margin-top、または margin-bottom 属性を使用して設定できます。

HTMLで水平線とテキストの間の距離を設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

html水平線とテキストの間の距離を設定します

<div>
	文字--没有设置距离
	<hr/>
	文字
</div>
<div>
	文字
	<hr style="margin-top: 20px"/>
	文字
</div>
<div>
	文字
	<hr style="margin-bottom: 20px"/>
	文字
</div>
<div>
	文字
	<hr style="margin: 20px 0 30px;"/>
	文字
</div>

レンダリング:

HTMLで水平線とテキストの間の距離を設定する方法

説明:

1. マージン属性

マージン省略属性は、1 つのステートメントですべてのマージン属性を設定します。この属性には 1 ~ 4 の値を指定できます。

#例:


margin:10px 5px 15px 20px;

    #上マージンは 10px
  • 右マージンは 5px
  • 下マージンは 15px
  • 左マージンは 20px
  • margin:10px 5px 15px;
    上のマージンは 10px
  • 左右のマージンは 5px
  • 下マージンは 15px
  • margin:10px 5px;
    上下の余白は 10px
  • 左右の余白は 5px
  • margin:10px;
    すべて 4 各マージンは 10px
2. margin-top 属性と margin-bottom 属性を使用します

    margin-top : 要素の上マージンを設定します

  • margin-bottom : 要素の下マージンを設定します
  • (学習ビデオ共有:
css ビデオ チュートリアル

)

以上がHTMLで水平線とテキストの間の距離を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。