Reducing line spaces in HTML

  • Unknown's avatar
    allisonmadison · Member ·

    I used the HTML block to write a poem with indents. While I figured out the indent codes the way I wanted my lines to indent, at the same time they caused extra gaps between lines that I (and, in all likelihood, my readers) will find distracting. Is there a way to keep the indents but reduce the unnecessary gaps between lines? I should note that my site utilizes the Colinear theme, and that I tried the Verse block but the same gaps still appeared. (I’ve already published the poem at https://allisonmadison.wordpress.com/2022/05/29/a-poem-strong/ and I don’t mind going back in to fix it if I get your guidance.)

    WP.com: Yes
    Correct account: Yes

    The blog I need help with is: (visible only to logged in users)

  • kokkieh · Staff ·

    Hi there,

    This is because you’re using <p> tags. <p> tags automatically add additional space above and below each tag – that’s how paragraph breaks in HTML get created.

    To prevent this you shouldn’t use <p> tags, but instead replace those with <span> tags. spans are inline elements, not block-level like ps, so they don’t add additional spacing by default.

    I tried the Verse block but the same gaps still appeared.

    The verse block wraps everything in the <pre> HTML tag, which doesn’t add any spacing on its own, and preserves all spacing exactly as you enter it. Did you still use <p> tags with the indent code inside the verse block? If so, that’s why you’re still seeing the extra spacing in that block.

    But with the verse block you don’t need to add in any extra HTML. With the verse block, if you want text indented you just add extra spaces to the point where you want the text to go, and the spacing won’t get stripped out as it does in a regular paragraph block.

  • The topic ‘Reducing line spaces in HTML’ is closed to new replies.