How to style HTML paragraphs with CSS to prevent empty lines between them?
12,184
Solution 1
Remove the top and bottom margins:
p{
margin-top:0;
margin-bottom:0
}
Solution 2
Generally <p>
tags will have non-zero vertical margin which gives the appearance of an "extra" line break. You can set the paragraph margin to zero if you want no "extra" space between them.
E.g.
<p style="margin: 0;">First paragraph</p>
<p style="margin: 0;">Second paragraph</p>
Author by
Thalecress
Updated on June 04, 2022Comments
-
Thalecress over 1 year
If I have 2 complete, successive paragraphs, how should I style them so that there is only one line break (so no empty line) between them?
E.g.
<p>First paragraph</p> <p>Second paragraph</p>
Should render as
First paragraph Second paragraph
I am generating this HTML with XSLT.
-
Jukka K. Korpela over 11 yearsI don’t think any browser has default nonzero padding for
p
elements. It’s all about vertical margins.