难题

我们通常使用 <pre> 和 <code> 元素来显示代码，它们具有浏览器所赋予的默认样式。

pre, code {
  font-family: monospace;
}

pre {
  display: block;
  margin: 1em 0;
  white-space: pre;
}

虽然一般建议用空格来做缩进，但是如果我们用 tab 缩进的话，浏览器会把其宽度显示为 8 个字符，非常难看。

解决方案

我们可以用 CSS3 的新属性 tab-size，这个属性接受一个 数字（表示字符数）或者一个 长度值（这个不实用）。我们通常将其设置为 4 或者 2。

pre {
  tab-size: 2;
}