Is there any way to increase the space between individual paragraphs delimited by soft-breaks with CSS?

Questions & Help
, ,
1

Hello, I find it very tiering on the eyes to have a large block of text even if the actual paragraphs are delimited by soft-breaks inside a multi-line block.

I inspected the code behind such a block and I see that it is a div with class “is-paragraph” and the soft-breaks are actually done with <br>. I have no idea if or how to achieve in CSS so these <br> inside <div class="is-paragraph"> to get extra height to them so the actual paragraphs in the text are a bit more airy.

image
image1434×396 146 KB

PS: it would be awesome if the gap between the Block Header and the Block Body would get the same gap for a consistent look… maybe do some styling of the

?

2

Use this and play around with the value.

.is-paragraph {
  line-height: 2;
}

IMG_1728

3

Hey, thanks for replying. I actually want to increase the space in between two soft-break delimited paragraphs inside one block. The Logseq Dev Tools shows that thesre are <br>s in between soft-breaks. What I am thinking is this:

if a <br> follows  (is inside) a <div class="is-paragraph"> then have that <br> extra high -somehow

What you suggested just increases the spacein between all lines in every paragraph (which can be nice with large texts)

4

Ah! Sorry for misunderstanding. That I don’t know.
Throw in an extra soft break lol :joy:

5

I was thinking something along:

.is-paragraph:has(br) br {
  height: 2.5;
}

but I tried that and it doesn’t do it either …

Edit: ok, Bard sucks, ChatGPT to the rescue:

    .is-paragraph > br {
        margin-top: 20px; /* Adjust the value as needed */
        display: block; /* Ensures proper spacing */
        content: '\A'; /* Injects a line break using generated content */
        white-space: pre; /* Preserves whitespace */
    }

Dunno if it’s the most optimized way but at least increases the spaces between paragraphs …

Now for the space between the Block Title (first paragraph) and the others …

1 Like
6

Ok, I believe I have a result:

.is-paragraph > br {
    margin-top: 20px; /* Adjust the value as needed */
    display: block; /* Ensures proper spacing */
    content: '\A'; /* Injects a line break using generated content */
    white-space: pre; /* Preserves whitespace */
}

.block-body {
  margin-top: 20px; /* Adjust the margin as needed */
}

I couldn’t manage to increase the bottom space of the block title but managed to increase the margin-top of the .block-body which achieves the same thing, namely to increase the distance between the first block paragraph and the other paragraphs in the block’s body.

The difference is huge in readability of long-form blocks:

image29
image291435×1309 582 KB

Unless anybody can suggest better/more optimized way, I’ll stick with this solution.

4 Likes
7

Took your version as a base and played around with it in collaboration with ChatGPT.

In settings → “Edit custom.css” I now have:

.is-paragraph > br {
    margin-top: 8px; /* Adjust the value as needed */
    display: block; /* Ensures proper spacing */
    content: '\A'; /* Injects a line break using generated content */
    white-space: pre; /* Preserves whitespace */
}

.block-body {
  margin-top: 4px; /* Adjust the margin as needed */
}

/* Add spacing between blocks */
.ls-block {
  margin-bottom: 8px;
  margin-top: 8px;
}

Give basically the same look as you have but there is now also vertical bottom space after each paragraph.

8

This is how I’ve done it, though I don’t make a lot of use of breaks within a block, so I don’t know how useful it is for your needs. It applies padding to the bottom of the initial span.inline, and all following paragraphs. Haven’t found a need to be more specific yet, but haven’t tested for edge-cases. You may not need the !important for the padding. I did because of other hacky junk I’m doing :joy:

.block-content span.inline,
.is-paragraph {
	padding: 0 0 1em 0 !important;
	display: inline-block;
}