html - 标签在其自身上方添加间隙？

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和基于负边距的解决方案，它也在同一个线程中。