CSS Paragraph spacing adjust p label paragraph up and down distance how to set

Source: Internet
Author: User
How the CSS adjusts the spacing between p paragraphs how to set up a solution

In the pages of the article in general we use the HTML p tag to segment, using the P tag on a section of the article and the next section of the middle will produce distance, how to control the spacing between P and p. The next step is to introduce how distance between paragraphs is adjusted and set.
There are three common ways to set the distance between upper and lower paragraphs through CSS, respectively: first, line-height row height

The more we set the value of the Line-height, the more the paragraph spacing increases, and the word spacing increases, and it is not recommended to set the spacing between paragraphs with this line-height style. In order to observe the effect, we set the CSS line-height to 20px and 50px contrast observation effect.
Key CSS code: p{line-height:22px}
1, Line-height for the 20px case, DIV+CSS code:

<! DOCTYPE html> 
two, CSS padding inner filler (inside margin)

You can recommend using padding to set up spacing between paragraphs. By setting up and down filler, the inner distance can be set up to the upper and lower spacing of p paragraphs.
Keyword: p{padding:10px 0}
Next THINKCSS the CSS paragraph up and down distance setting as a case.
1, set up and down the filler for 10px (padding:10px 0)
Complete Css+div Code:

<! DOCTYPE html> 
third, the CSS margin outside the distance

CSS Paragraph spacing adjustment margin to achieve spacing between upper and lower paragraphs style settings, we know margin is set up and down the distance between objects and objects, where the paragraph can also use this CSS style to achieve spacing. Here Thinkcss still set the two groups of margin styles for comparison observation.
Key style Word: p{margin:10px 0}
1, CSS settings margin up and down spacing for 10PX,HTML+CSS code:

<! DOCTYPE html> 
Iv. Summary of paragraph spacing

Article segmentation, the general use of HTML p tags, and the paragraph spacing set we recommend the use of padding and margin implementation, so that you can easily adjust the distance between paragraphs to achieve the distance between the paragraph layout beautification.

Reprinted from Thinkcss

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.