div在前面的顶部有额外的不需要的空间

Question

我无法理解为什么顶部有空的空间。我还没有应用任何样式

<pre>
  <div class="codeBlock">
    <ol>
     <li>(function() {</li>
     <li>function $codeBlock() {</li>
     <li>return {};</li>
     </li>}</li>
    </ol>
  </div>
</pre>

Answer 1

好的，这就是事情。 pre取得每一个角色并在它的显示中解释它，这意味着它将逐渐“显示”一个回车。尝试删除空格。让我们说你，你应用{％spaceless％}。如果您使用其他东西，请使用正确的功能，但如果您手动执行，请执行以下示例中的操作:)干杯

<pre><div class="codeBlock"><ol><li>(function() {</li><li>function $codeBlock() {</li><li>return {};</li><li>}</li></ol></div></pre>

Answer 2

pre具有white-space: pre默认样式。来自W3Schrools关于white-space: pre：

  

浏览器保留了空格。文本仅包含换行符。类似于HTML中的<pre>标记

当然，您可以将pre的内容移至一行，但不确定这是否具有灵活性和可维护性。

因此，您可以将white-space CSS属性更改为normal或nowrap（取决于换行的需要）：

＆＃13;

＆＃13;

pre {
  white-space: nowrap;
}

.codeBlock ol, li {
  margin: 0;
}

＆＃13;

<pre>
  <div class="codeBlock">
    <ol>
     <li>(function() {</li>
     <li>function $codeBlock() {</li>
     <li>return {};</li>
     </li>}</li>
    </ol>
  </div>
</pre>

＆＃13;

＆＃13;

＆＃13;

如果您想返回white-space的{​​{1}}行为，您还可以设置

ol