Empty lines between chess boxes

Question

I have created a chess board.

I have these lines that are white. If I do a styling on the div it will be applied to the whole div.

How can I fill those empty white spaces so it looks like a real chessboard?

function drawChessBoard(){
    var para = document.createElement("html");
    var body = document.createElement("body");
    para.appendChild(body);
    var body = document.getElementsByTagName("body")[0];
    var cb = document.createElement('chessboard');
    body.appendChild(cb);
    for (var row = 1; row <= 8; row++) {
        var div = document.createElement("div");
        cb.appendChild(div);
        for (let col = 1; col <= 8; col++) {
            var span = document.createElement('span');
            div.appendChild(span);
            if (row % 2 === 1 && col % 2 === 1){
                span.className = "white";
            } else if (row % 2 === 1 && col % 2 === 0) {
                              span.className = "black";
            }
           else if (row % 2 === 0 && col % 2 === 0) {
                span.className = 'white';
            }   else{
                              span.className = "black";
        }
    }
}
}
drawChessBoard();

div {
  text-align: center;
}
.white {
  display:inline-block;
  width:4em;
  height:4em;
  background-color: orange;
  border: 2px solid brown;
}
.black {
  display:inline-block;
  width:4em;
  height:4em;
  background-color: brown;
  border: 2px solid orange;
}

Don't forget rescaling. When making your chessboard less wide, the tiles collaps in to rows of e.g. 6 wide and 2 wide. — Jelle, Dec 17 '20 at 13:58

vsync · Answer 1 · 2020-12-17T14:37:48.623

Give all the cells (the <span> elements) vertical-align: middle;

.white, .black{ vertical-align: middle; }

Alternatively, you can use float: left instead of vertical-align

I would advise you not to have separate rows in your HTML markup, but simply place all the DOM nodes flat in their container, so you'll have 8x8 elements and then style it so you'll have only 8 per row:

How do I make a responsive grid with a checkered pattern?

score 0 · Answer 2 · answered Dec 17 '20 at 14:00

Here is your solution: When using inline-block you have to use vertical alignment in case the content of the inline-block element is filled.

function drawChessBoard() {
  var para = document.createElement("html");
  var body = document.createElement("body");
  para.appendChild(body);
  var body = document.getElementsByTagName("body")[0];
  var cb = document.createElement('chessboard');
  body.appendChild(cb);
  for (var row = 1; row <= 8; row++) {
    var div = document.createElement("div");
    cb.appendChild(div);
    for (let col = 1; col <= 8; col++) {
      var span = document.createElement('span');
      div.appendChild(span);
      if (row % 2 === 1 && col % 2 === 1) {
        span.className = "white";
      } else if (row % 2 === 1 && col % 2 === 0) {
        span.className = "black";
      } else if (row % 2 === 0 && col % 2 === 0) {
        span.className = 'white';
      } else {
        span.className = "black";
      }
    }
  }
}
drawChessBoard();

div {
  text-align: center;
}

.white {
  display: inline-block;
  width: 4em;
  height: 4em;
  background-color: orange;
  vertical-align: middle;
  border: 2px solid brown;
}

.black {
  display: inline-block;
  width: 4em;
  height: 4em;
  background-color: brown;
  border: 2px solid orange;
  vertical-align: middle;
}

Working example

Empty lines between chess boxes

2 Answers2