HTML で段落の行の高さと行間隔を設定する方法-htmlチュートリアル-php.cn

HTML で段落の行の高さと行間隔を設定する方法

php中世界最好的语言

リリース： 2017-11-22 17:58:45

オリジナル

15552 人が閲覧しました

p段落間の上下の間隔を設定するにはどうすればよいですか?

間の行間隔を制御できるスタイルはどれですか? 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でlabelタグを使用する方法

HTMLのタイトルタグ要素を変更する方法

DIV背景画像の背景を設定する方法

以上がHTML で段落の行の高さと行間隔を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。