Distance between code block and text paragraph

Hi all,

I want to reduce the space between the code block and the normal text paragraph.
I tried a few ways, but all of them didn’t work. Can anybody help?

The left side is the source code, and the right side is the preview.
Is there any way to reduce the space between the code block and the text as there is a big gap between them?

In Reading view, p elements have a top/bottom margin of 16px. Code blocks, pre elements, have a top/bottom margin of 18px. It’s easy to remove the top margin of pre, but then you have the leftover 16px from p elements to deal with.

So, in this case to get around that, a negative margin could work. This selects code blocks that follow paragraphs.

.markdown-rendered div:has(> p) + div:has(pre) {
    margin-top: -20px;
}

You could give that a try.

It works thanks!!!
And also can I know how to make it show the margin the size of a block?

There’s a great topic here on using the inspector and seeing the structure of Obsidian. It’s worth the time if you’re interested in this type of thing.

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.