html - 前和代码填充和缩进

Question

我有以下代码(http://jsfiddle.net/Th5aq/4/):

<p>
    Inline code <code>var a = 1;</code> and code block:    
    <pre><code>
      var a = 2;
      var b = a + 4;
    </code></pre>
</p>

我有两个问题:

1. 作为顶部和底部填充的代码块。为什么？

2. 我希望代码缩进只是代码标签内定义的缩进，而不是父标签的所有空格。

我该如何解决这些问题？

Answer 1

这些元素没有填充，正如您使用浏览器的开发人员工具检查测试页面所看到的那样:padding属性具有零值。您认为填充的只是 code 开头和结尾的空行元素。根据 pre 的定义元素，其中的空格被保留。

浏览器中有一条特殊规则(在 HTML5 中正式规定)，表示在 <pre> 之后立即换行。标记并紧接在 </pre> 之前结束标记被忽略。但是，由于 <code>，此规则不适用于此处。和 </code>标签。

最简单的解决方案是删除换行符:

<p>
    Inline code <code>var a = 1;</code> and code block:    
    <pre><code>      var a = 2;
      var b = a + 4;</code></pre>

(我省略了 </p> 标签，因为它无效并被浏览器忽略。p 元素不能包含 pre 元素，因此 <pre> 标签隐式关闭打开的 p 元素.)

或者，省略 <code>和 </code>标签。虽然在某种意义上是“合乎逻辑的”，但它们在这里没有实际用途，而且如您所见，它们会导致格式问题。除了一些专业，如对机器翻译的潜在影响，code标记只是将默认字体设置为等宽字体，这里是 pre已经这样做了。