How to set the distance between the top and bottom of p paragraphs by css
This article mainly introduces how css sets the distance between the upper and lower paragraphs of p paragraphs, which has a certain reference value, which can be used for reference by interested friends. I hope you will gain a lot after reading this article.
Using the typesetting of p high and low paragraphs, how to set the equipment for the distance between concave and convex paragraphs?
There is a space between html p and p paragraphs. By default, there is a fixed distance, so this spacing is the default value of margin-top and margin-bottom, and is related to line-height.
1. Line-height mediation p spacing
Then adjust the distance between p and p bump, and set about mediation in line-height.
P {line-height:30px}
The equipment is equipped with the distance between the up and down lines of pen and ink, and the distance between high and low can be adjusted at the same time.
2. Margin-top and margin-bottom mediate the distance between high and low p tags.
P {margin-top:10px;margin-bottom:10px}
By setting the equipment margin-top and margin-bottom to the p, the distance between the high and low paragraphs of the twist p is set.
3. CSS HTML example of up-and-down spacing
P paragraph upper and lower spacing isolation distance configuration instance CSS5.abc {line-height:20px; text-align:left}. Pmura p {margin-top:30px; margin-bottom:30px}. Pmurb p {margin-top:60px; margin-bottom:60px}
The first paragraph
The second paragraph
The third paragraph
The fourth paragraph
The first paragraph
The second paragraph
The third paragraph
The fourth paragraph
The first paragraph
The second paragraph
The third paragraph
The fourth paragraph
After class=p-an and class=p-b setting equipment equipment margin-top and margin-bottom modification to achieve p up and down distance setting.
Thank you for reading this article carefully. I hope the article "how to set the distance between upper and lower paragraphs in css" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
