避免保證金預標籤

Question

內如何避免內部pre標籤保證金：

<p>Some text</p> 

<pre> 
    <code> 
     Some code 
    </code> 
</pre> 

<p>Some text</p> 

<style> 
pre { 
    background-color: rgb(255,247,229); 
    border: 1px solid red; 
} 
</style> 

電流輸出：

所需的輸出：

目前的解決方案是手動刪除縮進在標記，如下所示。不過，據我瞭解，這不是最佳方式。

<pre> 
    <code> 
Some code 
    </code> 
</pre> 

Answer 1

您可以嘗試從pre改變white-space的默認值<pre>標籤pre-line。空白的

pre-line序列被倒塌。線條以新行字符分隔，位於<br>，並根據需要填充線框。

查看更多about white-space關於MDN。

pre { 
 
    background-color: rgb(255, 247, 229); 
 
    border: 1px solid red; 
 
    white-space: pre-line; 
 
}

<p>Some text</p> 
 
<pre> 
 
    <code> 
 
    Some code 
 
    </code> 
 
</pre> 
 
<p>Some text</p>

Answer 2

的<pre>（預格式化文本）標籤捕獲空格字符。

如果你真的想避免捕獲空白，那麼也許使用<div>會更適合你。否則，我會建議預先格式化您的文本。