CSSの段落間隔を設定する方法-CSSチュートリアル-php.cn

CSSの段落間隔を設定する方法

醉折花枝作酒筹

リリース： 2023-01-05 16:10:08

オリジナル

11759 人が閲覧しました

設定方法: 1. line-height 属性設定を使用します (構文 "line-height: height value"); 2. パディングを使用して段落の上下の間隔を設定します (構文 "padding: spacing value 0"; 3. margin の使用「margin: spacing value 0」という構文で、上下の段落間の間隔を設定します。

CSSの段落間隔を設定する方法

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

CSS を使用して上の段落と下の段落の間の距離を設定するには、次の 3 つの一般的な方法があります:

1. 行の高さ

line- の値を設定します。 height more 大きい場合、段落間隔が増加し、単語間の間隔も増加します。段落間隔の距離を設定するためにこの行の高さのスタイルを使用することはお勧めできません。効果を観察するために、CSS の行の高さをそれぞれ 20px と 50px に設定して効果を比較します。

主要な CSS コード: p{line-height:22px}

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document</title>
<style>
p{ 
    line-height:30px
}
/* css 注释： 设置行高为30px */
</style>
</head>
<body>
<p>第一段，第一行<br /> 第二行</p> <p>第二段</p> <p>第三段</p>
</body>
</html>

ログイン後にコピー

2. CSS パディングの内部パディング (内側のマージン)

パディングを使用して設定することをお勧めします。段落の上下の間隔。上下の内部パディングと内部距離を設定することで、p 段落の上下の間隔を設定できます。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document</title>
<style> 
p{ 
    padding:15px 0
    }
/* css注释： 设置padding为上下15px */
</style>
</head>
<body>
<p>第一段，第一行<br /> 第二行</p>
<p>第二段</p> 
<p>第三段</p>
</body>
</html>

ログイン後にコピー

3. css margin margin

CSS 段落間隔調整マージンは、上の段落と下の段落の間の間隔距離のスタイル設定を実装します。、左右のオブジェクト、およびオブジェクト。この段落では、この CSS スタイルを使用して間隔を確保することもできます。

<!DOCTYPE html>
 <html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <title>document</title>
 <style>
  p{
      margin:10px 0
  } 
  /* css注释： 设置margin为对象上下间距10px */ 
  </style> 
  </head> 
  <body>
   <p>第一段，第一行<br /> 第二行</p> <p>第二段</p> <p>第三段</p> 
   </body> 
   </html>

ログイン後にコピー

推奨学習: css ビデオチュートリアル

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