CSS代码荧光笔 - 预编码标签中的边距

Question

请看这个小提琴:这里

我正在寻找的方法是在第一个示例中删除顶部的额外空间(标签的黑色圆形1和顶部边缘之间的空间pre)并使其看起来像第二个

第一个例子在它上面有一些额外的空间(除了来自强元素的边距),我知道它是因为在<pre><code>我不想删除那个额外换行符之后的额外新行,因为删除它会使代码看起来真的不可读所以我加了这个

pre > code > strong:first-of-type { margin-top: 10px; }

我认为它会工作,但我忘了我可能strong在第一行有多个标签.现在我不知道该怎么办.我的问题有解决办法吗？

Answer 1

尝试对CSS进行以下调整:

pre > code {
    white-space: pre;
    margin-top: -1.00em;
    display: block;
}

你也可以省略:

pre > code > strong:first-of-type { margin-top: 10px; }  /** not needed **/

在Windows 7上的Firefox中测试,应该可以正常工作,基本的CSS 2.1,没有异国情调.

这是如何工作的

对于HTML源代码的可视化格式,之后会有换行符<pre><code>,它会在渲染内容中创建单个字符行,其高度为1.00em.

您可以通过将<code>块的上边距设置为-1.00em来进行补偿.但是,要使顶部/底部边距起作用,您需要设置display: block为<code>元素.