Home > Developer > Web Develop
In the HTML page, we see the article paragraph using the P tag between the upper and lower paragraphs there will be a line between the distance, here is the p and p paragraph distance between the adjustment of the setting?
HTML p line spacing p line spacing between upper and lower paragraphs
From the above HTML <p> Paragraph article demonstration effect, p and p up and down the paragraph line spacing is a certain distance. This paragraph p line spacing can be adjusted by the CSS adjustment. There are two common methods, one line-height adjustment and the other using margin to adjust line spacing.
I. Using CSS line-height to set P line spacingUsing the CSS row height style line-height can set the adjustment p line spacing, but also affects the upper and lower spacing between each line of text, so using line-height although can be used to set the HTML p line distance interval, but not very practical, General Line-height only sets the spacing between the upper and lower text.
One not set line-height and one set line spacing contrast effect
Obviously a CSS line-height is able to change the P-line and P-line spacing interval, but also let the text of each paragraph automatically line up and down the spacing also changed, so line-height is not practical.
Second, using margin to achieve p and p up and down line spacing change1, the implementation of P and p up and down the line spacing and the same as the BR line 0 distance
1), key HTML p line spacing code:
Explanation: Set the upper and lower spacing to p to 0, left and right auto spacing.
2), p line distance set to 0 complete code
3), p line and line spacing setting effect
Margin setting p line spacing is zero
4), HTML P-line spacing is zero summary
This setting margin:0 auto (equivalent to maring:0 Auto 0 auto abbreviation, 0 on the left, self-adaptive at the bottom, 0 for the right, and adaptive for P), can achieve zero line distance.
2, HTML p line spacing adjustment major Small
Of course, this is also the use of CSS margin to achieve the p paragraph up and down paragraph line distance adjustment.
1), key HTML p line distance adjustment CSS Code
is still the space between the margin objects property.
2), p line spacing becomes smaller and larger code description
Here respectively to not set margin, default original distance, set margin:10px auto, set line spacing up and down distance is 10px, set margin:30px auto, set line spacing up and down distance is 30px.
The three CSS codes are:
One: not set;
Two kinds: p{margin:10px auto}
Three kinds: p{margin:30px auto}
The three effects are as follows:
Change p paragraph up and down paragraph line spacing three kinds of distance change case
When setting the P line spacing distance, you need to consider whether it is necessary, in general, an article placed in HTML using the P tag to fragment the mark, it is not necessary to adjust the p paragraph distance. It's really necessary to adjust the line distance between articles in general by padding or margin.
HTML p Inline Distance <p> label up-down spacing CSS settings
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
