How to set paragraph line height and line spacing in HTML-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to set paragraph line height and line spacing in HTML

php中世界最好的语言

Nov 22, 2017 pm 05:58 PM

html how set up

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. css line-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:

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

Copy after login

Settingsmargin-top is 0, margin-bottom is 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

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

Copy after login

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

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

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

Copy after login

The above settings set both margin-top and margin-bottom. is 0, then we set the padding-top and padding-bottom values 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:

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

Copy after login

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!