Home > Article > Web Front-end > How to set paragraph line height and line spacing in HTML
How to set paragraph line height and line spacing in HTML
- php中世界最好的语言Original
- 2017-11-22 17:58:4515493browse
How to set the top and bottom spacing between p paragraphs? Which styles can control the line spacing between e388a4556c0f65e1904146cc1a846bee? 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>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>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
<!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>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>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!