How to set css paragraph spacing-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to set css paragraph spacing

醉折花枝作酒筹

Apr 20, 2021 pm 04:27 PM

css

Setting method: 1. Use the line-height attribute setting, the syntax "line-height: height value"; 2. Use padding to set the upper and lower spacing of the paragraph, the syntax "padding: spacing value 0"; 3. Use margin Set the spacing between the upper and lower paragraphs with the syntax "margin: spacing value 0".

How to set css paragraph spacing

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

There are three common ways to set the distance between upper and lower paragraphs through CSS, as follows:

1. Line-height

We set the value of line-height more If larger, the paragraph spacing will increase, and the spacing between words will also increase. It is not recommended to use this line-height style to set the paragraph spacing distance. In order to observe the effect, we set the CSS line-height to 20px and 50px respectively to compare the effect.

Key CSS code: 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 padding inner padding (inner margin)

It is recommended to use padding to set the upper and lower spacing of the paragraph. By setting the upper and lower inner padding and inner distance, you can set the upper and lower spacing of p paragraphs.

<!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 paragraph spacing adjustment margin implements the spacing distance style setting between the upper and lower paragraphs. We know that margin is to set the distance between the upper, lower, left, and right objects, and the object. This paragraph can also use this css style to achieve spacing.

<!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>

Recommended learning: css video tutorial

The above is the detailed content of How to set css paragraph spacing. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn