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>