如何在CSS/HTML中移动代码块的垂直位置？由于使用的字体不同，它看起来比文本的其余部分低

5q4ezhmt 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(141)

我在一个名为Joplin的程序中使用程式化的代码块。该程序允许您通过css定义自己的样式。我试图将代码块向上移动1- 2 px，以便它们与周围的文本对齐：
x1c 0d1x的数据
下面是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

来源：https://stackoverflow.com/questions/77729390/how-can-i-move-the-vertical-position-of-a-code-block-in-css-html-due-to-the-dif

1条答案

按热度按时间

xghobddn1#

正如我对你的问题的评论，添加position: relative; top: -2px;将代码块向上移动2个像素。例如：

.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;
    top: -2px;
}

个字符

赞(0）回复(0）举报 2024-01-09

我来回答

如何在CSS/HTML中移动代码块的垂直位置？由于使用的字体不同，它看起来比文本的其余部分低

1条答案

相关问题

热门标签

最新问答