Simple Question on Formatting

Is it acceptable to format HTML like this with the extra spaces inside the tags? (for the purpose of keeping things aligned neatly):

Not sure if it is acceptable, but I think it would be better to use tabs in between the tags:

<div class="game-board-container">
  <div class="square one">   1 </div>
  <div class="square two">   2 </div>
  <div class="square three"> 3 </div>
  <div class="square four">  4 </div>
  <div class="square five">  5 </div>
  <div class="square six">   6 </div>
  <div class="square seven"> 7 </div>
  <div class="square eight"> 8 </div>
  <div class="square nine">  9 </div>
</div>

Spaces are undesirable. I think that BenGitter variant will be better for eyes.

I can’t find any style guide that explicitly says not to do this, but I’ve never seen it before, either. Aside from lists, I can’t think of many cases where this sort of thing happens anyways, and I’m not sure that the spacing makes it more readable. My suggestion is to avoid special formatting for edge cases