Margin with codeblock

[MelectronVolt]

Hello,

I’am new to Obsidian and I’am surprised that the new editor doesn’t add margin top/bottom to codeblocks. In Reader mode, no problem, but in editor everything is too close.

I don’t find a good css to solve the problem, don’t know if it’s a bug…

Thanks

[WhiteNoise]

If you are unsure if it’s a bug, please post to help section.

[midvok]

I’m just creating my own theme and also noticed it’s difficult to add margins in the source mode, because the original theme set zero margins as important for any content.

.markdown-source-view.mod-cm6 .cm-content > * {
  margin: 0 !important;
  display: block;
}

And when I try to force some positive margins, it breaks the line numbering alignment

A possible workaround could be to add invisible borders (with bg color) to the code blocks like this:

.markdown-source-view.mod-cm6 .cm-content .HyperMD-codeblock-begin {
  border-top: 1em solid var(--background-primary);
}
.markdown-source-view.mod-cm6 .cm-content .HyperMD-codeblock-end {
  border-bottom: 1em solid var(--background-primary);
}

Or just add some padding to headings like this:

.markdown-source-view.mod-cm6 .cm-content .HyperMD-header {
  padding-top: 1em;
  padding-bottom: 1em;
}

It seems that paddings are safe and don’t break the line numbers.

[efemkay]

@midvok

it’s difficult to add margins in the source mode,

It’s not advisable to use margin top bottom in editing view (source mode or LP). See post here.

Heading (top&bottom) spacing through CSS

Just for posterity why it’s a bad idea to use margins instead of paddings, from Licat, for editing view: “The editor measures and predicts where elements are located on the page so that when you scroll around, parts of the page that’s out of view can be removed to keep the editor performant. Using margins completely breaks the ability for the editor to do that because margins don’t behave predictably due to the margin collapse algorithm” (Discord)