Html CSS代码高亮显示-前置代码标记中的边距

请看这把小提琴：

我要寻找的是一种方法，在第一个示例中移除顶部的额外空间（黑色圆形

1

和

pre

标记的顶部边缘之间的空间），并使其看起来像第二个

<pre><code>
    My code snippet
    Another line
</code></pre>

  <script>
  $( document ).ready(function() {
    $(document.body).find("pre code").each(function() {
      $(this).html($.trim($(this).html()));
    });
  });
 </script>

第一个示例上面有一些额外的空间（强元素的边距除外），我知道这是因为

后面有一个额外的新行，我不想删除这个额外的新行，因为删除它会使代码看起来真的不可读，所以我添加了这个

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

pre>code>strong:第一种类型{margin top:10px；}

我原以为它会起作用，但我忘了在第一行可能有多个
strong
标记。现在我不知道该怎么办。有解决我的问题的方法吗？
尝试对CSS进行以下调整：

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

您也可以省略以下内容：

<pre><code>
<strong><b>1</b>#id-name</strong> <strong><b>2</b>.class-name</strong> {
    <strong><b>3</b>property: value;</strong>
}
</code></pre>

小提琴：

在Windows7上的Firefox中测试，应该可以正常工作，基本的CSS 2.1，没有任何异国情调

这是如何工作的

对于HTML源代码的可视格式，在
之后有一个换行符，
<pre><code><strong><b>1</b>#id-name</strong> <strong><b>2</b>.class-name</strong> {
    <strong><b>3</b>property: value;</strong>
}
</code></pre>

这将在渲染内容中创建一条1.00em高的字符线

您可以通过将
块的上边距设置为-1.00em进行补偿。但是，要使上/下页边距正常工作，您需要将
display:block
设置为
元素。
您不应该更改任何样式。
问题的出现是因为您在预标记中工作。
更改样式以修复此问题将是一种试图修复标记结构的黑客行为
引擎浏览器的内部预标记空间管理非常特殊

按如下方式修改您的预处理内容，一切看起来都会很好

您的代码


1#id名称2.类名{
3属性：值；
}


修改（第二行应继续第一行…）

1#id名称2.类名{
3属性：值；
}


fiddle
我偶然碰到了同一个问题，花了一个多小时寻找解决方案。我同意@Fico的回答，并希望通过补充信息来支持它

而不是这样做：


您要执行以下操作：


请注意，第一行的缩进需要使用相同的空格

我看了其他几个“标准网站”。例如，StackOverflow对

你可以在这里看到小提琴：

JavaScript方法的优点是，您可以放置更多的freedome元素。另外，大多数代码片段删除额外的行可能是个好主意。
黑圈？在Chrome中是的，在FF中是一个正方形pre-strong，pre-b，pre-code{verticle align:top}，并减少pre>code>strong@SteveWellens对不起，我忘了提一下，代码目前只适用于Chrome。@SubodhGhulaxe抱歉，它不起作用。简单而神奇的解决方案。非常感谢您的欢迎！感谢您花时间创建一个演示JSFIDLE（+1！），欢迎使用SO！我的荣幸：）但是为什么负边距技巧不适用于
内联块
？一个
内联块
是一种特殊的CSS动物，在内部，内容的格式类似于块元素（例如将识别顶部/底部填充），但其他方面将类似于内联元素，内联元素忽略上/下页边距（其中+或-）。OP知道这一点，希望在HTML源文件中保留空白。然而，您的评估和理解是正确的。足够清楚@MarcAudet和nd txs供您评论。我当然投票赞成你的清洁解决方案！
  <script>
  $( document ).ready(function() {
    $(document.body).find("pre code").each(function() {
      $(this).html($.trim($(this).html()));
    });
  });
 </script>