Question

我有以下HTML：

<h2>Embed Code</h2>
<pre>
  <code>
&lt;script type=&quot;text/javascript&quot;&gt;
  var something = 'else';
&lt;/script&gt;
  </code>
</pre>

以下CSS：

h2 {
  background:#1e7ca2;
  font-weight: 100;
  font-size: 1.25em;
  padding: 10px 15px;
  margin: 0;
  color: white;
}
pre {
  margin:0;
  padding:0;
}
code {
  margin: 0;
  padding: 0 30px;
  display: block;
  background: #1d1f20;
  color: #839496;
  font-size: .85em;
  line-height: 1.6em;
}

但h2和pre元素之间存在差距，我似乎无法摆脱这种差距。

您可以在此处查看问题：http://jsfiddle.net/gaby/k5V8U/

Answer 1

<pre>里面的内容也保留了空白......

如果您删除<pre>和<code>之间的空白

<pre><code>

和

</code></pre>

它得到修复..

http://jsfiddle.net/gaby/k5V8U/1/

演示

Answer 2

这是因为<pre>保留了空格。您的<pre>代码的开头和结尾都有空换行符。将其更改为以下内容：

<h2>Embed Code</h2>
<pre><code>
&lt;script type=&quot;text/javascript&quot;&gt;
  var something = 'else';
&lt;/script&gt;
  </code></pre>

您可能还需要删除<code>代码开头和结尾的换行符：

<h2>Embed Code</h2>
<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
  var something = 'else';
&lt;/script&gt;</code></pre>

希望有所帮助！

Answer 3

你自己创造了这个差距。您指定的background-color是<code>的属性。通过在<pre>元素中使用换行符，您实际创建一个新行<pre>可以保留空白区域。您可能想要使用

<h2>Embed Code</h2>
<pre><code>
&lt;script type=&quot;text/javascript&quot;&gt;
  var something = 'else';
&lt;/script&gt;</code></pre>

如果您希望保留“保证金”，但请填写<code>使用

的颜色

<h2>Embed Code</h2>
<pre><code>
&lt;script type=&quot;text/javascript&quot;&gt;
  var something = 'else';
&lt;/script&gt;
</code></pre>

Answer 4

正如其他人提到的那样，您需要将<code>元素放在与其中的内容相同的行上，因为<pre>认为它是内容的开头。还有一个简单的基于JavaScript的解决方案，我在这个答案中发布了：https://stackoverflow.com/a/23001060/207661和基于负边距的解决方案，它也在同一个线程中。

<pre> tag adds gap above itself?</pre>

4 个答案: