Obsidian CSS br tag being render with height 0

[yen_le]

What I’m trying to do

Previously, in old Obsidian version (I think before 1.9.0), I can style br tag to give the paragraph spacing (on Laptop only, it stops working for iPhone and iPad some old versions ago).

Now, in reading move, br tag has no height anymore and it has bugged me so much. If anyone know how to achieve, please advice me. Thank you in advanced.

In live preview:

In reading mode:

Things I have tried

Add height to br tag with CSS:

br {
    content: "";
    display: block;
    line-height: 10px;
    margin: 10px;
}

[dawni]

The br tag isn’t meant to have dimensions. It has one job: Produce a line break.

Instead of trying to set break-tag margins, style the elements around it.

For example, to increase the Reading view paragraph spacing shown in your screenshot, try:

body {
	--p-spacing: 24px;
}

[yen_le]

You can look at the inspection view that I included. The two “paragraphs” are encapsulated within 1 one block. They are not in separate paragraph for this to be feasible.

[dawni]

Choose selectors that do affect the area you want.

The DOM in your screencap is scrolled to a section that doesn’t match what you’re showing in the note, so after scouring your screencap for a customized option for you, I did have to guess a little.

(Your note portion shows “is also associative” + line break + “The communicative” along with their styling. Whereas your DOM portion shows some other area that has “are associative.” + line break + a math block that immediately follows in the next span.)

If you’d like to post an example of your source—as text here in a forum comment—that might get more people to look into it with you. Still:

It remains that forcing margins on a <br> is unlikely to consistently produce your expected result.

[yen_le]

My screenshot is most definitely the portion of my note. The br tag now is not rendered at the correct place anymore (like it is previously in older version). I know that styling br is not a good choice but Obsidian doesn’t separate the paragraph if they are in the same level for a list item.

[dawni]

When you look at your screenshot, you can see that the text and elements in the DOM section (the lower part) are different from what’s in the note section (the upper part).

But that’s fine, as your last comment (about the break tag being rendered at “not the correct place anymore”) shows that you’re probably only talking about when you have a single new line character. I think you might not be able to do that in an elegant, CSS-only way. A double-new-line (as in, a new paragraph) might be the easiest way to manage line spacing. It’s also the way intended by CSS. I understand if that’s not exactly what you’re hoping for.

Anyway, I’ll bow out (and mute out) to make room for others.

All the best.

[yen_le]

It’s just sucked that there are so many in consistencies between reading view and live preview.

Still, if anybody know any css method to achieve this, please let me know.

[yen_le]

Welp, found some work around. If anybody needs.

.markdown-source-view.is-live-preview {
    .HyperMD-list-line:has(span[class*="cm-list-"])+.HyperMD-list-line-nobullet:not(.HyperMD-codeblock):not(:has(span[class*="cm-list-"])):has(~.HyperMD-list-line span[class*="cm-list-"]),
    .HyperMD-list-line:has(span[class*="cm-list-"])+.cm-line:has(>br):not(.HyperMD-codeblock):has(+.HyperMD-list-line span[class*="cm-list-"]) {
        display: none;
    }
}

Source view:

Live preview:

Reading view: