ホームページ > 記事 > ウェブフロントエンド > HTML で段落の行の高さと行間隔を設定する方法
HTML で段落の行の高さと行間隔を設定する方法
- php中世界最好的语言オリジナル
- 2017-11-22 17:58:4515494ブラウズ
p段落間の上下の間隔を設定するにはどうすればよいですか? e388a4556c0f65e1904146cc1a846bee 間の行間隔を制御できるスタイルはどれですか? CSSの行高さの書き方は？今日はこの P 段落を明確に学習して、誰もが p の行間と行の高さのスタイルを完全にマスターできるようにします。
次に、CSS スタイルを使用して p 段落の上部と下部の行間隔を設定する方法を紹介します。p は記事の段落タグです。p 段落の行間隔を制御する CSS div 属性は次のとおりです:
1, css line-height
2、margin
3. パディング
関連するスペースと行間隔のチュートリアル
1. CSS テキストの行間隔
2. CSS の単語の間隔
余白のスタイルとパディングによって決まり、行の高さも一定の関係があります。次にp段落間の行間を例を通して紹介し、cssの例を通してp行間の設定をマスターしていきます。
css+div ケースの説明では、効果を観察するために、4 つの DIV ボックス オブジェクトを設定し、それぞれの中に p 段落を追加し、p 段落に異なる行間隔を設定して、その効果を観察し、効果を提供し、ルールを理解して、p行間隔のCSS設定をマスターしてください。
名前はそれぞれ「.div-a」、「.div-b」、「.div-c」、「.div-d」です
p 段落タグのデフォルトのスタイルでは、パディング値はデフォルトで0.同時に、p テキストの行の高さを 20px に設定します
ケース 1、マージンの上下を 0
1 に設定します。完全な css+div HTML コードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>p行距实例 在线演示</title>
<style>
p{ line-height:20px}
.div-a p{ margin:0 auto}
</style>
</head>
<body>
<div class="div-a">
<p>第一段</p>
<p>第二段<br />第二段第二行</p>
<p>第三段</p>
</div>
</body>
</html>Set margin-top を0に、margin-bottomは0、(margin autoの役割を理解してください)
上記の例を通して、margin-topとmargin-bottomの値が次のように設定されていることがわかります。 0 の場合、p 段落の行間隔は存在せず、効果は line-height の行間隔の設定と同じになります。
ケース 2: 上下のマージンを 30px に設定する
1. HTML ソース コードを完成させる
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>p行距实例 在线演示</title>
<style>
p{ line-height:20px}
.div-b p{ margin:30px auto}
</style>
</head>
<body><div class="div-b">
<p>第一段</p>
<p>第二段<br />第二段第二行</p>
<p>第三段</p>
</div>
</body>
</html>ここで、オブジェクト「.div-b」の CSS margin: 30px auto を設定することは、margin-top を 30px に設定することと同等です。 , margin- 一番下は30pxです
複数のマージン設定で行間隔を調整します
複数のマージン設定で行間隔を調整します
上記のケースから、p段落の行間隔はマージン設定で実現できることがわかります。
ケース 3. 上下のマージンを 0 に設定し、上下のパディングを 20px に設定します
1. HTML コードの完全な例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>p行距实例 在线演示 </title>
<style>
p{ line-height:20px}
.div-c p{ margin:0 auto; padding:20px 0}
</style>
</head>
<body>
<div class="div-c">
<p>第一段</p>
<p>第二段<br />第二段第二行</p>
<p>第三段</p>
</div>
</body>
</html>上記は margin-top と margin-bottom を 0 に設定します。 padding-top と padding-bottom の値は 20px です。
上記のケースを通じて、p でパディング スタイルを設定しても行間隔を設定できることがわかります。
ケース 4、マージンまたはパディング スタイルを設定しません
p のマージン スタイルとパディング スタイルを設定しません。つまり、デフォルトの P スタイルの行間隔効果を確認するために p のスタイルを設定しません。
1. DIV CSS サンプル コードを完成させます:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>p行距实例 在线演示 </title>
<style>
p{ line-height:20px}
.div-d p{ }
</style>
</head>
<body>
<div class="div-d">
<p>第一段</p>
<p>第二段<br />第二段第二行</p>
<p>第三段</p>
</div>
</body>
</html>スタイルを設定しない場合は、p のデフォルト スタイルが反映されます。
P 段落の紹介は以上です。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事にご注目ください。
関連記事:
以上がHTML で段落の行の高さと行間隔を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。