Looking at the Computed Styles tab in Chrome, the reason for the issue is it is getting the glyphs from three different font faces:
Courier New -- 72 Glyphs
Lucida Sans Unicode -- 36 Glyphs
Arial Unicode MS -- 2 glyphs
Each of these faces will have different sizing.
Possible Solutions
- Replace border glyphs with css border
- Replace 'empty' cells with a glyph from the same area as the chess pieces, possibly U+3000 "ideographic space":
- use something like a
ul
or even flexbox to display the elements - gives the advantage of being able to select each element programatically!
Good luck