How to set paragraph line height and line spacing in HTML

How to set the top and bottom spacing between p paragraphs? Which styles can control the line spacing between

? How to write css line height? Today we will study this P paragraph clearly, so that everyone can fully master the p line spacing and line height style.

Then we will introduce to you how to set the top and bottom line spacing of p paragraph through CSS style, and p is the article paragraph tag. The css div attributes that control the line spacing of p paragraph are:

1. cssline-height

2, margin

3, padding

Related and spacing line spacing tutorial

1, css text line spacing

2. CSS word spacing

Because the upper and lower distance between p is determined by margin style and padding, and line-height also has a certain relationship. Next, we will introduce the line spacing between p paragraphs through examples, and master the setting of p line spacing through css examples.

css+div case description, in order to observe the effect, we set up four DIV box objects, add p paragraphs inside each, and set different line spacings for the p paragraphs to observe their effects, provide effects, find out the rules, and master them css sets p line spacing.

The names are ".div-a", ".div-b", ".div-c", ".div-d"

In the default style of the p paragraph tag, The value of padding defaults to 0. At the same time, set the p text line-height to 20px

Case 1. Set the upper and lower margin to 0

1. The complete css+div html code is as follows:

      
  
 
第一段
 
第二段
第二段第二行
 
第三段
 
  

Settingsmargin-topis 0,margin-bottomis 0, (understand the role of margin auto)

Through the above example, we can observe that if the margin-top and margin-bottom are If the value is set to 0, then p paragraph line spacing will not exist, and the effect will be the same as line-height setting line spacing.

Case 2. Set the upper and lower margin to 30px

1. Complete html source code

      
 
 
第一段
 
第二段
第二段第二行
 
第三段
 
  

Here the CSS margin: 30px is set for the object ".div-b" auto is equivalent to setting margin-top to 30px and margin-bottom to 30px

Adjust line spacing through multiple margin settings

Adjust line spacing through multiple margin settings

From the above case we can It can be seen that p paragraph spacing can be achieved through margin settings.

Case 3. Set the upper and lower margin to 0, and the upper and lower padding to 20px

1. Complete example HTML code

      
  
 
第一段
 
第二段
第二段第二行
 
第三段
 
  

The above settings set both margin-top and margin-bottom. is 0, then we set thepadding-topandpadding-bottomvalues to 20px.

Through the above cases, we can see that setting the padding style on p can still set the line spacing.

Case 4. We do not set margin or padding style

We do not set margin style and padding style for p, which means we do not set style for p to see the default P style line spacing effect.

1. Complete the DIV CSS example code:

      
  
 
第一段
 
第二段
第二段第二行
 
第三段
 
  

If you don’t set the style, it will reflect the p default style.

That’s all the introduction to the P paragraph. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use the label tag in html

How to modify the HTML title tag element

How to set the DIV background image background

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