🎮 学习者的数字游乐园

在 Obsidian 的选项 > 外观 > CSS 代码片段中启用下列自定义 CSS 样式代码，可以让 阅读模式 📖 下行与行之间、段与段之间的区隔更明显。

/* 调整各级标题样式 */
.markdown-preview-section > div.el-h1 > h1,
.markdown-preview-section > div.el-h2 > h2,
.markdown-preview-section > div.el-h3 > h3,
.markdown-preview-section > div.el-h4 > h4,
.markdown-preview-section > div.el-h5 > h5,
.markdown-preview-section > div.el-h6 > h6 {
  line-height: 150% !important;
  padding: 0.3rem 0 1rem 0 !important;
  margin: 0 !important;
}

/* 调整正文段落样式 */
.markdown-preview-section > div.el-p > p {
  line-height: 150% !important;
  margin: 0 !important;
  padding: 0.3rem 0 0.7rem 0 !important;
}

/* 调整正文列表样式 (针对所有列表) */
.markdown-preview-section > div ul,
.markdown-preview-section > div ol {
  margin-top: 0.3rem !important;
}

/* 调整正文列表样式 (仅针对内层列表) */
.markdown-preview-section > div li > ul,
.markdown-preview-section > div li > ol {
  padding-top: 0.4rem !important;
}

/* 调整正文列表样式 (仅针对不是最末一条的列表项) */
.markdown-preview-section > div ul > li:not(:last-child),
.markdown-preview-section > div ol > li:not(:last-child) {
  line-height: 150% !important;
  padding-bottom: 0.3rem !important;
}

/* 调整正文图片样式 */
.markdown-preview-section > div img {
  line-height: 150% !important;
  padding: 0.5rem 0 0.7rem 0 !important;
  margin: 0 !important;
}

/* 调整正文换行样式 (比分段样式间距更近) */
.markdown-preview-section > div.el-p > p > br {
  display: block !important;
  content: ' ';
  padding-bottom: 0.2rem !important;
}

🤔 默认情况下，Obsidian 笔记中的文字段落看起来如下面的截图中这样：

😃 启用了自定义 CSS 样式代码后，文字段落之间的区隔如下图所示：

返回卡片盒 🗃️

创建日期: 2023年06月18日 21:42