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