如何通过CSS调整Joplin中行内代码块的垂直位置以对齐文本？

问题描述 #

我在Joplin中自定义了行内代码块的CSS样式，但由于字体差异，代码块位置比周围文本低1-2px，希望通过CSS微调实现视觉对齐：

当前使用的CSS代码：

.inline-code, .mce-content-body code, .jop-tinymce table code {
    border-width: 1px !important;
    border-color: #bdbdbd;
    background-color: #f3f3f3 !important;
    padding: 0.2em 0.4em 0.2em 0.4em !important;
    border-radius: 0.27em !important;
    font-size: 13px !important;
    font-family: "Input Mono", "Roboto Mono", "Monospace" !important;
    margin-right: 0.2em !important;
    color: #292929 !important;
}

解决方案 #

可以通过以下两种CSS方法微调行内代码块的垂直位置，实现和周围文本对齐：

方案1：使用vertical-align（推荐） #

这是行内元素对齐的原生解决方案，直接给代码块添加vertical-align属性，通过调整数值实现精准对齐：

.inline-code, .mce-content-body code, .jop-tinymce table code {
    border-width: 1px !important;
    border-color: #bdbdbd;
    background-color: #f3f3f3 !important;
    padding: 0.2em 0.4em 0.2em 0.4em !important;
    border-radius: 0.27em !important;
    font-size: 13px !important;
    font-family: "Input Mono", "Roboto Mono", "Monospace" !important;
    margin-right: 0.2em !important;
    color: #292929 !important;
    vertical-align: -1px !important; /* 向上微调1px，可根据实际效果改为-2px */
}

方案2：使用相对定位强制偏移 #

如果vertical-align效果不符合预期，可以用相对定位配合top属性强制调整位置：

.inline-code, .mce-content-body code, .jop-tinymce table code {
    border-width: 1px !important;
    border-color: #bdbdbd;
    background-color: #f3f3f3 !important;
    padding: 0.2em 0.4em 0.2em 0.4em !important;
    border-radius: 0.27em !important;
    font-size: 13px !important;
    font-family: "Input Mono", "Roboto Mono", "Monospace" !important;
    margin-right: 0.2em !important;
    color: #292929 !important;
    position: relative !important;
    top: -1px !important; /* 向上偏移1px，按需调整数值 */
}

说明 #

• 优先选择方案1，vertical-align是行内元素对齐的标准属性，兼容性更好，不会破坏原有布局。
• 可以根据实际显示效果调整-1px为-2px，直到代码块和周围文本视觉对齐为止。

内容的提问来源于stack exchange，提问作者fmotion1