CSS使用tab-size属性控制代码缩进的大小

tab-size CSS 属性允许你指定在渲染 `<pre字符的元素时，每个制表符（tab）应该占据的空间大小（以空格为单位）。这对于控制代码或预格式化文本的缩进非常有用，尤其是在需要确保代码在不同浏览器和设备上保持一致的缩进显示时。

基本用法

pre {
  tab-size: 4; /* 每个制表符相当于4个空格的宽度 */
}

code {
设置不同的制表符大小 */
}

在这个例子中，<pre> 元素内的每个制表符将占据相当于4相当于2个空格的空间。通常用于内联代码，而 <pre> 元素用于预格式化的文本块，它保留了文本中的空白字符（包括空格和制表符）。

兼容性

tab-size 属性在大多数现代浏览器中都有很好的支持，包括Chrome、Firefox、Safari、Edge等。然而，如果你需要支持非常旧的浏览器版本，可能需要考虑使用JavaScript或其他CSS技巧来模拟这一行为。

示例

HTML:

<pre>
function helloWorld() {
	console.log("Hello, world!");
}
</pre>

function helloWorld() {
	console.log("Hello, world!");
}
</code>

CSS:

pre, code {
  white-space: pre-wrap; /* 保持空白字符和换行符 */
  tab-size: 4; /* 每个制表符相当于4个空格 */
}

每个制表符相当于4个空格的缩进显示。不如 <pre> 元素明显，除非它被包含在能够保持空白字符的容器中（如<pre>或具有white-space: pre-wrap;的<div>）。