Line break problems

Support Themes & Styling
2

You might try the following:

  • A single <newline> (\n) inside a text has no effect.
  • <space><space><newline> creates an html <br> element inside a paragraph <p>
  • Two <newlines> are treated as a paragraph break </p><p> and hence a margin shows between the paragraphs depending on the stylesheet applied.
  • Three, four, five, … <newlines> is seen as a single new paragraph. No extra space between the two paragraphs.
  • In Grav, html can be used inside Markdown, therefore, you can use <br> to force extra empty space within a paragraph
  • Extra empty paragraphs <p></p> do not create extra empty lines.
  • Extra <p>&nbsp;</p> does create extra empty lines.

By the way…
If a particular paragraph needs extra leading space (margin-top), it might be better to embed that paragraph manually inside a paragraph element like <p id="my-id">My paragraph</p> and use the stylesheet to add extra space above the paragraph using #my-id {margin-top: 2 rem;}

This way, the paragraph can be better adapted to responsive layouts (using media queries) while adding extra breaks <br> or <p> do not play nice in responsive layouts.

Hope this helps…

1 Like