2

请看这个小提琴：这里

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

第一个示例上方有一些额外的空间（强元素的边距除外），我知道这是因为在<pre><code>我不想删除额外的换行符之后额外的换行符，因为删除它会使代码看起来真的不可读，所以我添加了这个

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

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

4

3 回答 3

8

尝试对您的 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>。

于 2013-04-26T16:22:21.500 回答
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>元素。大多数代码片段也可能是删除多余行的好主意。

于 2014-04-10T23:43:35.860 回答
1

你不应该改变任何风格。出现问题是因为您在 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>

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

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

在这里摆弄

于 2013-04-26T16:37:34.910 回答