Hello.
I am absolutely abysmal at anything to do with coding. I have been trying to minimize the space between body text and headings, which is seemingly inherent in HTML/markdown. I have more or less succeeded by playing around with margins of both paragraphs and headings. This has unfortunately affected the spacing between a paragraph and a list (any lists, though i most commonly use unordered).
Here is the code I currently got going on:
.mod-cm6 .cm-editor .HyperMD-header, .markdown-reading-view .markdown-preview-section :is(h1,h2,h3,h4,h5,h6) {
margin-bottom: 0;
margin-top: 0;
}
.mod-cm6 .cm-editor .HyperMD-header, .markdown-reading-view .markdown-preview-section :is(p) {
margin-bottom: 1em;
margin-top: 0;
line-height: 1.5em;
line-break: auto;
}
I found this code on a different topic on the forum and altered it to fit how I wanted my text to look. It works perfectly so far. The one issue I’m having is that the bottom margin is creating a massive distance between the body text and lists, which I would prefer to sit closer together. I have theoretically fixed that by using the following code:
.mod-cm6 .cm-editor .HyperMD-header, .markdown-reading-view .markdown-preview-section :is(ol,ul) {
margin-bottom: 0;
margin-top: -0.8em;
}
Except now I have another issue; nested unordered lists. I found out only after this whole thing that unordered lists are nested, which means that whenever I try to make a ‘next level item’ so to speak, it applies the -0.8em margin. So that results in nested unordered lists looking like this:
I’ve been playing around with li but quickly discovered that did not do what I wanted, since the issue is the ul and how nesting works. Is there a way to scooch the whole list closer to the body text without nested list spacing being weird? I know my whole code in general might be the issue, so I’ll be happy to change it, but I very much want to reduce the ginormous spacing between headings and body text as well.
Additional Information: I’m using the Border theme with a modified paperlike preset, “paragraph spacing also takes effect after a line break” is turned off.
While it may be more-or-less working, it’s a bad idea to adjust margins in the editor (source mode and live preview) as it can mess up text input, moving around with your cursor, etc. From a team member a while ago:
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
In short: don’t touch margins in the editor. Use paddings instead. Adjusting margins in Reading view / rendered contexts is fine.
For example here:
.mod-cm6 .cm-editor .HyperMD-header, .markdown-reading-view .markdown-preview-section :is(ol,ul) {
margin-bottom: 0;
margin-top: -0.8em;
}
.mod-cm6 .cm-editor .HyperMD-header is for headings in the editor and they are getting a margin-bottom of 0 and a negative margin-top of -0.8em.
I would try adjusting these variables to start and see if you can get things looking alright.
--p-spacing defines the spacing between paragraphs (defaults to 1rem).--heading-spacing defines the spacing above a heading when it follows a paragraph (defaults to 2.5x paragraph spacing).
For example; adjust values as desired →
body {
--p-spacing: 0.3rem; /* default -> 1rem; */
--heading-spacing: 0; /* default -> calc(var(--p-spacing) * 2.5); */
--line-height-normal: 1.5; /* default -> 1.5 */
}
/* if needed */
/* heading top+bottom padding in the editor */
.markdown-source-view.mod-cm6 .HyperMD-header {
padding-block: 0.2em; /* padding-block is combined padding-top+padding-bottom */
}
live preview | reading view
Hi! Thanks for the reply.
Didn’t know about the margins thing; I’ll remove the changes to the source view/preview and keep it in Reading view then (I’ve tried changing the margins to padding in the code and it did not help).
I tested out the code you have provided and it didn’t really do what I had hoped. There’s still a bunch of space between the elements in Reading view:
And I am specifically trying to get rid of/change those. The code does shorten the distance between the end of a paragraph and the heading under it, so that’s nice.
I’m specifically looking for a way to make the Reading view have similar spacing and line breaks as Source view:
I’ve managed to get this going on:
By changing the previously shown margin-change code except I removed all .mod-cm6 .cm-editor .HyperMD-header, so the changes should be only implemented in Reading view. There is less spacing between headers and body text (which is good), but the paragraph spacing/line break is completely lost (unlike in Source view). Both and <br> create waaay too big spacing in the Reading view, plus they’d be annoying to have to type.
Basically is there any type of code that will translate the way the text appears in Source to how it appears in Reading?? With the same spacing, line height, line breaks, and so on?
Apologies if not.
Thank you for your time by the way!
Additional information: Tried messing around with line-break in the code snippet I’m using to no avail, and turning on the ‘paragraph spacing also takes effect after a line break’ setting in Border theme / Style Settings did not affect the line break noticeably.
