Question

请看这个小提琴：Here

我正在寻找的方法是在第一个示例中删除顶部的额外空间（黑色圆形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 **/

小提琴：http://jsfiddle.net/audetwebdesign/WscKu/2/

在Windows 7上的Firefox中测试，应该可以正常工作，基本的CSS 2.1，没什么特别的。

如何运作

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

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

Answer 2

我碰到了同样的问题，花了一个多小时才找到解决方案。我同意@Fico的回答，并希望通过其他信息来支持它。

而不是这样做：

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

你想这样做：

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

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

我看了几个其他的“标准网站”。例如，StackOverflow对<pre><code>内的代码片段执行此操作。 highlight.js库的官方演示示例也使用相同的约定。这在HTML源代码中有点难看，但经验法则似乎是<code>中的内容应该与<code>元素在同一行开始。

@Marc Audet提出的解决方案也存在问题。如果你使用负上边距，如果你有一个（或者你将来放置它），它将覆盖在边框上。

如果你愿意使用一点点JavaScript，可能会有解决方法。您只需使用以下内容即可修剪<pre><code>内的所有内容：

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

你可以在这里看到小提琴：http://jsbin.com/bayawazi/2/edit

JavaScript方法的优点是你可以放置<code>元素更加自由。此外，大多数代码都会删除额外的行，这可能是个好主意。

Answer 3

你不应该改变任何风格。问题出现了，因为你在预标签内工作。更改样式以解决此问题将是一个寻找修复标记结构的黑客内部预标签引擎浏览器的空间管理非常特别。

按如下方式修改您的预览内容，一切都会正常

您的代码

<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>

修改（第二行应该继续第一行......）

<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>

小提琴here

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

3 个答案: