Why is there an extra space between my line breaks?

  • Resolved rairose

    (@rairose)


    8 years, 11 months ago

    I’m working on this site: https://www.rairosewriting.com/kriscalvin/

    In the header there are some quotes. The quote that reads “. . . GASP-WORTHY TWISTS. . . REAL TREAT OF A DEBUT” is broken into two lines, which is fine, but there seems to be extra spacing between the lines. The code for the quote is: 

    <p><font size="3" color="#EB0024"><b>". . . GASP-WORTHY TWISTS. . . REAL TREAT OF A DEBUT"</b></font></p>
<p style="font-size:16px">— Catriona McPherson,<br>Multi-Award Winning Suspense & Mystery Author</p>

    In the CSS, I have reduced the line height to 60%. I don’t want to smoosh it much more because it mashes everything together, rather than just that one section where the quote is.

    Any tips?

Viewing 3 replies - 1 through 3 (of 3 total)

  • There’s a default rule for paragraph tags <p> which sets a bottom margin of 10px. In your custom CSS (you aren’t modifying the theme’s style.css file, are you?), add this rule:

    header p {
   margin-bottom: 0;
}

    This should eliminate the extra spacing between paragraphs (or change it to some other value if you want a little bit of spacing).

    Thread Starter rairose

    (@rairose)

    Perfect, thank you!!

    If you use a value other than zero, you need to add px to the end, like this:

    header p {
   margin-bottom: 5px;
}

    If you leave the px off, then it won’t work.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Why is there an extra space between my line breaks?’ is closed to new replies.