What are the three ways to set line spacing in css

This article mainly explains "what are the three ways to set line spacing in css". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what are the three ways to set line spacing in css"?

1. Use numeric values to set line spacing

Use numeric values to set line spacing p.small {line-height: 0.5} p.big {line-height: 2}

This is a paragraph with standard line height. The default row height is approximately 1. This is a paragraph with standard line height. This is a paragraph with standard line height. This is a paragraph with standard line height. This is a paragraph with standard line height. This is a paragraph with standard line height.

This paragraph has a smaller line height. This paragraph has a smaller line height. This paragraph has a smaller line height. This paragraph has a smaller line height. This paragraph has a smaller line height. This paragraph has a smaller line height. This paragraph has a smaller line height.

This paragraph has a larger line height. This paragraph has a larger line height. This paragraph has a larger line height. This paragraph has a larger line height. This paragraph has a larger line height. This paragraph has a larger line height. This paragraph has a larger line height.

2. Use pixel values to set line spacing

Use numeric values to set line spacing p.small {line-height: 10px;} p.big {line-height: 30px}

This is a paragraph with standard line height. The default line height in most browsers is about 20px. This is a paragraph with standard line height. This is a paragraph with standard line height. This is a paragraph with standard line height. This is a paragraph with standard line height. This is a paragraph with standard line height.

This paragraph has a smaller line height. This paragraph has a smaller line height. This paragraph has a smaller line height. This paragraph has a smaller line height. This paragraph has a smaller line height. This paragraph has a smaller line height. This paragraph has a smaller line height.

This paragraph has a larger line height. This paragraph has a larger line height. This paragraph has a larger line height. This paragraph has a larger line height. This paragraph has a larger line height. This paragraph has a larger line height. This paragraph has a larger line height.

3. The percentage sets the line spacing. The line-height property specifies a percentage, which calculates the line height relative to the font.

Use numeric values to set line spacing p.small {line-height: 80%;} p.big {line-height: 200%;}

This is a paragraph with standard line height. The default line height in most browsers is about 110% to 120%. This is a paragraph with standard line height. This is a paragraph with standard line height. This is a paragraph with standard line height. This is a paragraph with standard line height. This is a paragraph with standard line height.

This paragraph has a smaller line height. This paragraph has a smaller line height. This paragraph has a smaller line height. This paragraph has a smaller line height. This paragraph has a smaller line height. This paragraph has a smaller line height. This paragraph has a smaller line height.

This paragraph has a larger line height. This paragraph has a larger line height. This paragraph has a larger line height. This paragraph has a larger line height. This paragraph has a larger line height. This paragraph has a larger line height. This paragraph has a larger line height.

At this point, I believe you have a deeper understanding of "what are the three ways to set line spacing in css". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!