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>

我遇到两个问题：

代码块作为顶部和底部的填充。为什么呢？
我希望代码缩进只是代码标记内定义的代码，而不是父标记的所有空格。

我该如何解决这些问题？

Answer 1

由于缩进：

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

<强>解决方案：
http://jsfiddle.net/Th5aq/5/

<强>为什么呢？由于HTML中的空格

您有var a和<code>个空格......可以删除，如：

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

Answer 2

元素没有填充，您可以通过使用浏览器的开发人员工具检查测试页来看到：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>标记隐式关闭open p元素。）

或者，省略<code>和</code>标记。虽然在某种意义上它们是“合乎逻辑的”，但它们在这里并不具有实际意义，正如您所看到的那样，它们会在格式化方面造成问题。除了对机器翻译的潜在影响等一些专业外，code标记只是将默认字体设置为等宽字体，此处pre已经这样做了。

Pre和Code填充和缩进

2 个答案: