tab-size

tab-size: 10px;

tab-size: 16px;

tab-size: 24px;

tab-size: 4;

<section id="default-example">
  <pre id="example-element">&#9;123</pre>
</section>

#example-element {
  border: 1px solid;
}

/* <number> 値 */
tab-size: 4;
tab-size: 0;

/* <length> 値 */
tab-size: 10px;
tab-size: 2em;

/* グローバル値 */
tab-size: inherit;
tab-size: initial;
tab-size: revert;
tab-size: revert-layer;
tab-size: unset;

pre {
  tab-size: 4; /* スペース 4 つ分となります */
}

pre {
  tab-size: 0; /* インデント除去 */
}

<p>タブなし</p>
<p>&#0009;既定の 8 文字幅のタブサイズ</p>
<p class="custom-number">&#0009;3 文字幅のカスタムタブサイズ</p>
<p>&nbsp;&nbsp;&nbsp;カスタムタブサイズと同じ 3 文字の空白</p>
<p class="custom-length">&#0009;50px 幅のカスタムタブサイズ</p>

body {
  border: 1px solid red;
  margin: 1rem;
}

p {
  white-space: pre;
}

.custom-number {
  tab-size: 3;
}

.custom-length {
  tab-size: 50px;
}