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>
Share:
12,184
Thalecress
Author by

Thalecress

Updated on June 04, 2022

Comments

  • Thalecress
    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
    Jukka K. Korpela over 11 years
    I don’t think any browser has default nonzero padding for p elements. It’s all about vertical margins.