调整【有序、无序列表、表格】与【上文以及各级标题】之间的间距

众所周知,有序/无序列表在阅读模式下会自动与上文空出一行,在某些情况下会造成逻辑上的割裂,虽然这是markdown的特性,但可以通过css样式来迂回解决。


使用方法:

  1. 通过调整top来调整高度,负值越小高度越高,建议不要超过你的一行的高度
  2. 通过调整left来调整缩进,正值越大缩进越大,依照自己喜好调整

实现原理:实际上并没有消除自动添加的空行,只是把列表/表格显示上移了,覆盖在空行上了,也算是一种迂回路线了


css代码:

/* 控制段落与表格间的距离 */
.el-p + .el-table {
  margin-top: -30px;  /* 上边距 */
}

/* 控制标题与表格间的距离 */
[class^="el-h"] + .el-table {
  margin-top: 0px;    /* 上边距 */
}

/* 控制段落与列表间的距离与缩进 */
.el-p + .el-ol,
.el-p + .el-ul {
  margin-top: -30px;  /* 上边距 */
  padding-left: 20px; /* 缩进 */ 
}

/* 控制标题与列表间的距离 */
[class^="el-h"] + .el-ol,
[class^="el-h"] + .el-ul {
  margin-top: 0px;    /* 上边距 */
  padding-left: 20px; /* 缩进 */
}


使用前:

使用后:

2 个赞

确实没明白为啥会自动空一行
如果我想空行,可以自己添加啊

看了论坛,好像是一个特性叫做【空白压缩】,估计算是底层机制了。不过现在好在通过css代码从表面上解决了这个问题 :face_with_peeking_eye: