Shulou(Shulou.com)06/01 Report--

This article mainly introduces the css p paragraph line high spacing how to set the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that you read this css p paragraph line high spacing how to set the article will have something to gain, let's take a look.

Because the up-down distance implementation between p uses margin style and padding decision, and line-height also has a certain relationship. Next, DIVCSS5 introduces the line spacing between p paragraphs through the example method, and grasps 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, respectively add p paragraphs, and at the same time set different line spacing for p paragraphs to observe their effects, and provide the effect to find out the rules in order to master css to set p line spacing.

They are named ".-a", ".-b", ".-c", ".-d" respectively.

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

Case 1. Set margin up and down to 0

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

Online demonstration of DIVCSS5 p {line-height:20px}.-a p {margin:0 auto} for example with p line spacing

The first paragraph

Second paragraph second second line

The third paragraph

Set margin-top to 0Ma marginal bottom to 0, (understand the role of margin auto)

2. Screenshot of p-line spacing effect

P line spacing achieves zero distance screenshot

It is observed from the above example that if the values of margin-top and margin-bottom are set to 0, then the p paragraph line spacing no longer exists, and the effect is the same as the line spacing set by line-height.

Case 2. Set margin up and down to 30px

1. Complete html source code

Online demonstration of DIVCSS5 p {line-height:20px}.-b p {margin:30px auto} for an example with p line spacing

The first paragraph

Second paragraph second second line

The third paragraph

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

2. Screenshot of div+css instance

Adjust line spacing through multi-margin settings

From the above example, we can see that the p paragraph line spacing can be achieved through the margin setting.

Case 3. Set the top and bottom of margin to 0 and the top of padding to 20px

1. Complete example HTML code

Online demonstration of DIVCSS5 p {line-height:20px}.-c p {margin:0 auto; padding:20px 0} for example with p line spacing

The first paragraph

Second paragraph second second line

The third paragraph

Both margin-top and margin-bottom are set to 0 above, and then we set the padding-top and padding-bottom values to 20px.

2. Screenshot of the effect of an example

Take a screenshot of a p instance

From the above case, we can see that setting the padding style for p can still achieve the line spacing setting.

Case 4. We don't set margin or padding style.

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

1. Complete the DIV CSS instance code:

Online demonstration of DIVCSS5 p {line-height:20px}.-d p {} for an example with p line spacing

The first paragraph

Second paragraph second second line

The third paragraph

Do not set the style to reflect the p default style

2. Screenshot of css instance

Do not set any style default line spacing effect screenshot for p

This case shows that if no style is set for p, it is observed that p has certain Margin-top and margin-bottom values by default, which means a certain spacing.

This is the end of the article on "how to set the line spacing of p paragraphs in css". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to set the line height of p paragraphs in css". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.