摆脱“代码”标签上方/下方的额外空白区域

Question

我似乎无法弄清楚HTML中这些<code>标记的上方和下方是什么空格。它似乎不是边距或填充。在下面的示例中，两者都设置为0，并且检查w / chrome dev工具似乎没有给出任何答案。额外的空间（上方和下方的绿色框）显示在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>

Answer 1

空格位于代码标记中。这是没有空格的样子：

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

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

Answer 2

<pre>内的换行符会产生额外的空间。

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

请在此处查看编辑过的小提琴：http://jsfiddle.net/RPaLd/1/

编辑：

你也可以删除它：

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

来自CSS，因为这是代码块的默认值。

Answer 3

将white-space:nowrap;添加到pre CSS

DEMO http://jsfiddle.net/kevinPHPkevin/RPaLd/3/

Answer 4

修改：没看到其他人已经发布了完全相同的内容 - 抱歉！

---

在pre代码中保留所有空格 - 删除<code>代码前后的空格：

<section>
    <pre><code>// some awesome code</code></pre>
</section>