使用预标记时遇到意外结果

Question

罢工标签的输出向左偏移一点（这里向右偏移）

 <pre>
	<strong>This text is strong</strong>
	<b>This text is bold</b>
	<i>this text is italised</i>
	<em title="emphasised" style="color:red;">this text is 
        emphasised</em>
	<strike>this text is striked</strike>
	<del>this text is deleted</del>
</pre>

被删除的文字必须在强调文字的正下方。

Answer 1

<pre>标签显示的内容与在标签中输入的内容完全相同。因此，所有空白和换行符在渲染时都将保留。

它向左移动是因为<pre>标记内有空格。

删除所有不需要的空格和换行符，一切都将对齐。

<pre>
<strong>This text is strong</strong>
<b>This text is bold</b>
<i>this text is italised</i>
<em title="emphasised" style="color:red;">this text is emphasised</em>
<strike>this text is striked</strike>
<del>this text is deleted</del>
</pre>

Answer 2

我认为这只是一种错觉，因为罢工线触及了字符框。

您的带有参考文本和强调文本行框的代码段：

pre * {
 background-color: #ddd;
}

<pre>
      <strong>This text is strong</strong>
      <b>This text is bold</b>
      <i>this text is italised</i>
      <em title="emphasised" style="color:red;">this text is 
      emphasised</em>
      <span>this text is not striked</span>
      <strike>this text is striked</strike>
      <span>this text is not striked</span>
      <del>this text is deleted</del>
      <span>this text is not striked</span>
</pre>

屏幕截图：