タブでインデントしたコードは、ブラウザーでは空白8文字分の幅で表示されます。pre に tab-size: 4 を付けると4文字分になります。数値と長さの違い、タブ位置の考え方、効かない場合を Chromium で確かめました。