0

我似乎无法弄清楚<code>HTML 中这些标签的上方和下方的空白来自何处。它似乎不是边距或填充。在下面的示例中，两者都设置为 0，并且使用 chrome 开发工具进行检查似乎没有给出任何答案。额外的空间（上方和下方的绿色框）显示在 Chrome、FF 和 IE9 中。

http://jsfiddle.net/RPaLd/

<style type="text/css">
    section{
      border: thin solid black;
    }

    pre{
      border: thin solid red;
    }

    code{
      border: thin solid green;
      margin: 0px 0px;
      padding: 0px 0px;
    }
</style>

<section>
    <pre>
        <code>
            // some code goes here
        </code>
    </pre>
</section>

在此处输入图像描述

4

4 回答 4

4

空格在您的代码标签中。以下是没有空格的情况：

<pre><code>// some code goes here</code></pre>

代码是一个内联元素，将保留这些空格。

于 2013-08-08T19:43:17.567 回答
3

里面的换行符<pre>会导致额外的空间。

您可以删除新行或添加white-space: nowrap;到您的 CSS。

在这里查看编辑过的小提琴：http: //jsfiddle.net/RPaLd/1/

编辑：

你也可以删除这个：

margin: 0px 0px;
padding: 0px 0px;

来自您的 CSS，因为这是代码块的默认设置。

于 2013-08-08T19:45:05.620 回答
2

添加white-space:nowrap;到preCSS

演示http://jsfiddle.net/kevinPHPkevin/RPaLd/3/

于 2013-08-08T19:43:16.330 回答
0

编辑：没有看到其他人已经发布了完全相同的内容-对不起！

在pre标签中保留所有空白 - 删除<code>标签前后的空白：

<section>
    <pre><code>// some awesome code</code></pre>
</section>
于 2013-08-08T19:56:50.250 回答