[CSS片段]调整编辑模式和预览模式的行间距、段间距、列表间距

经过不断的调试参数、询问chatgpt,终于解决了编辑模式和预览模式下行间距、段间距和列表间距的调整问题,按照下面这段代码调整完,编辑模式和预览模式就非常接近了。

另外,调试过程中我发现同样的参数在编辑和预览模式下表现不一致,询问gpt之后它给了如下答复: “由于编辑模式和预览模式在Obsidian中使用的是不同的HTML结构,它们对CSS样式的响应可能会有所不同。编辑模式下,文本是直接被渲染在<textarea> 或者与之类似的可编辑元素中,而预览模式通常是标准的HTML渲染。”

/* 编辑模式下的行间距和段间距 */
.cm-s-obsidian .cm-line {
    line-height: 1.8; /* 行间距调整为1.7 */
    padding-top: 1.25em; /* 段首间距调整为0.75em */
    padding-bottom: 1.25em; /* 段尾间距调整为0.75em */
}

/* 编辑模式下非段落元素(如列表)的行间距 */
.cm-s-obsidian .CodeMirror-line:not(.CodeMirror-line-wrapping) {
    padding-bottom: 0.75em; /* 如果您希望这里有间距的话 */
}

/* 调整编辑模式下列表的间距,使其与预览模式类似 */
.cm-s-obsidian .CodeMirror-line.CodeMirror-line-wrapping {
    padding-top: 0.3em; /* 列表项之间的间距,根据需求调整 */
    padding-bottom: 0.3em; /* 列表项之间的间距,根据需求调整 */
}

/* 编辑模式下调整标题后内容的上间距 */
:root {
    --header-bottom-spacing: 0.25em; /* 根据需要调整这个值 */
  }
  
  .cm-s-obsidian .cm-line.HyperMD-header {
    padding-bottom: var(--header-bottom-spacing) ; /* 使用 !important 确保样式覆盖 */
  }
  
  .cm-s-obsidian .cm-line.HyperMD-header + .cm-line:not(.HyperMD-header):not(:has(>br:only-child)) {
    padding-top: var(--header-bottom-spacing) ; /* 使用 !important 确保样式覆盖 */
  }
  


/* 预览模式下的段落行间距和段间距 */
.markdown-preview-view p {
    line-height: 1.7; /* 行间距保持一致 */
    margin-top: 0.75em; /* 段首间距保持一致 */
    margin-bottom: 0.75em; /* 段尾间距保持一致 */
}

/* 预览模式下列表项的行间距和段间距 */
.markdown-preview-view ul li, 
.markdown-preview-view ol li {
    line-height: 1.7; /* 行间距保持一致 */
    margin-top: 0.2em; /* 列表项之间的间距保持一致 */
    margin-bottom: 0.2em; /* 列表项之间的间距保持一致 */
}

/* 预览模式下一级列表的整体边距 */
.markdown-preview-view > ul, 
.markdown-preview-view > ol {
    margin-top: 0.75em; /* 一级列表与文本之间的间距保持一致 */
    margin-bottom: 0.75em; /* 一级列表与文本之间的间距保持一致 */
}

/* 预览模式下嵌套列表的间距调整 */
.markdown-preview-view ul ul, 
.markdown-preview-view ul ol, 
.markdown-preview-view ol ul, 
.markdown-preview-view ol ol {
    margin-top: 0.2em; /* 嵌套列表与上级列表项之间的间距保持一致 */
    margin-bottom: 0.2em; /* 嵌套列表与上级列表项之间的间距保持一致 */
}


下面是编辑模式和预览模式的效果,ps标题与文本之间没有空行


12 个赞

最好能给出前后对比的截图,这样方便参考。谢谢 。

:grinning:
谢谢,加上了,有用!

有大佬指点说,用你的CSS,可以解决这个问题,我弄了半天,发现还是不行,是我弄错了吗?还是别的什么原因?求解答。

大佬,这个正文后面接列表的间距怎么调整

把>删掉就行了。大佬也会犯错。

/* 预览模式下一级列表的整体边距 */
.markdown-preview-view > ul, 
.markdown-preview-view > ol {
    margin-top: 0.75em; /* 一级列表与文本之间的间距保持一致 */
    margin-bottom: 0.75em; /* 一级列表与文本之间的间距保持一致 */
}
/* 预览模式下一级列表的整体边距 */
.markdown-preview-view > ul, 
.markdown-preview-view > ol {
    margin-top: 0.75em; /* 一级列表与文本之间的间距保持一致 */
    margin-bottom: 0.75em; /* 一级列表与文本之间的间距保持一致 */
}

大佬,ul 和 ol 前面是不是多了个符号>。我删除后使用体验更好,避免了文本与列表之间的间距过大的问题。