javascript - CSS background and overlapping borders

Question

I have the following codes: HTML:

<div class="page">
  <div class="table">
    <div class="row">
      <div class="cell diffBackground"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>

    <div class="row">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>

    <div class="row">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>

  </div>
  
  <div>
    <button>Left</button>
    <button>Right</button>
    <button>Up</button>
    <button>Down</button>
  </div>
</div>

CSS:

.page {
  display: flex;
}

.table {
  width: 300px;
  height: 300px;
}

.row {
  width: 100%;
  height: 100px;
  display: flex;
}

.cell {
  border: 2px solid blue;
  margin-left: -2px;
  margin-bottom: -2px;
  width: 100%;
  height: 100px;
}

.diffBackground {
  background-color: green;
}

JavaScript:

const cells = document.querySelectorAll('.cell');
console.log(cells.length, 'cell length')
const rowLength = document.querySelectorAll('.row').length;
const rowObj = document.querySelector('.row');
const allRowObjs = document.querySelectorAll('.row');
// need to revisit this
const oneColLength = allRowObjs[0].children.length; 
const oneRowLength = allRowObjs[0].children.length; //4
let currIndex = 0;
const matrix = new Array(allRowObjs.length);
let currX = 0;
let currY = 0;
let counter = 0;
const buttons = document.querySelectorAll('button');

for(let i = 0; i<=rowLength-1; i++) {
    matrix[i] = new Array(oneColLength);
}

// copy cells to matrix
for(let i = 0; i<=rowLength-1; i++) {
  for(let j = 0; j<=oneColLength-1; j++) {
    matrix[i][j] = cells[counter];
    counter++;
  }
}

console.log(matrix.length, 'matrix length');

buttons.forEach(button => {
  button.addEventListener('click', function() {
    removeHighlight();
    moveAndCheckBound(this);
  })
})

cells.forEach(cell => {
  cell.addEventListener('click', function() {
      removeHighlight();
      cell.style.backgroundColor = 'green';
      getCurrentPos(this);
  })
})

function removeHighlight() {
  cells.forEach(cell => {
    cell.style.backgroundColor = 'white';
  })
}

function getCurrentPos(ele) {
    for(let i = 0; i<=matrix.length-1; i++) {
      for(let j = 0; j<=oneColLength-1;j++) {
        if(ele === matrix[i][j]) {
          currX = i;
          currY = j;
        }
      }
    }
}

function moveAndCheckBound(ele) {
  for(let i = 0; i<=buttons.length; i++) {
    if(ele === buttons[i]) {
        checkBound(i);
        break;
    }
  }
}

function checkBound(pos) {
  switch(pos) {
    case 0:
      if(currY >0) {
          currY--;
          repaint();
      }
      break;
    case 1:
      if(currY < oneColLength-1) {
          currY++;
          repaint();
      }
      break;
    case 2:
      if(currX > 0) {
        currX--;
        repaint();
      }
      break;
    case 3:
      if(currX < rowLength-1) {
        currX++;
        repaint();
      }
      break;
  }
  repaint(); //default case
}

function repaint() {
  removeHighlight();
  matrix[currX][currY].style.backgroundColor = 'green';
}

The problem I'm having is when my page is first loaded, there exist overlapping borders for top and bottom. However, when I navigate around the board either by clicking or using the buttons, the overlapping borders go away. The only difference is that a backgroundColor:white is appended to every cell upon navigation.

My questions are:

1. Why does the background image have an effect on the overlapping borders?
2. The solution is of course, attaching a background-color:white to every cell. But is there a way to get rid of overlapping borders? Why do I only need margin-left and margin-bottom to be negative, but don't need margin-right and margin-top as well?

JS fiddle code is here https://jsfiddle.net/bryanh210/4869th3g/3/ Thank you!

Answer 1

You are setting width and height to 100% (or 100px) for .cell. But it usually does not include the border in defaut browser styles.

I just added:

*{
  box-sizing: border-box;  /* ADDED */
}

And removed the margins... Read more about box-sizing.

const cells = document.querySelectorAll('.cell');
console.log(cells.length, 'cell length')
const rowLength = document.querySelectorAll('.row').length;
const rowObj = document.querySelector('.row');
const allRowObjs = document.querySelectorAll('.row');
// need to revisit this
const oneColLength = allRowObjs[0].children.length;
const oneRowLength = allRowObjs[0].children.length; //4
let currIndex = 0;
const matrix = new Array(allRowObjs.length);
let currX = 0;
let currY = 0;
let counter = 0;
const buttons = document.querySelectorAll('button');

for (let i = 0; i <= rowLength - 1; i++) {
  matrix[i] = new Array(oneColLength);
}

// copy cells to matrix
for (let i = 0; i <= rowLength - 1; i++) {
  for (let j = 0; j <= oneColLength - 1; j++) {
    matrix[i][j] = cells[counter];
    counter++;
  }
}

console.log(matrix.length, 'matrix length');

buttons.forEach(button => {
  button.addEventListener('click', function() {
    removeHighlight();
    moveAndCheckBound(this);
  })
})

cells.forEach(cell => {
  cell.addEventListener('click', function() {
    removeHighlight();
    cell.style.backgroundColor = 'green';
    getCurrentPos(this);
  })
})

function removeHighlight() {
  cells.forEach(cell => {
    cell.style.backgroundColor = 'white';
  })
}

function getCurrentPos(ele) {
  for (let i = 0; i <= matrix.length - 1; i++) {
    for (let j = 0; j <= oneColLength - 1; j++) {
      if (ele === matrix[i][j]) {
        currX = i;
        currY = j;
      }
    }
  }
}

function moveAndCheckBound(ele) {
  for (let i = 0; i <= buttons.length; i++) {
    if (ele === buttons[i]) {
      checkBound(i);
      break;
    }
  }
}

// think thru this
function checkBound(pos) {
  switch (pos) {
    case 0:
      if (currY > 0) {
        currY--;
        repaint();
      }
      break;
    case 1:
      if (currY < oneColLength - 1) {
        currY++;
        repaint();
      }
      break;
    case 2:
      if (currX > 0) {
        currX--;
        repaint();
      }
      break;
    case 3:
      if (currX < rowLength - 1) {
        currX++;
        repaint();
      }
      break;
  }
  repaint(); //default case
}

function repaint() {
  removeHighlight();
  matrix[currX][currY].style.backgroundColor = 'green';
}

*{
  box-sizing: border-box;  /* ADDED */
}

.page {
  display: flex;
}

.table {
  width: 300px;
  height: 300px;
}

.row {
  width: 100%;
  height: 100px;
  display: flex;
}

.cell {
  border: 2px solid blue;
  /* margin-left: -2px; */
  /* margin-bottom: -2px; */
  width: 100%;
  height: 100px;
}

.diffBackground {
  background-color: green;
}

<div class="page">
  <div class="table">
    <div class="row">
      <div class="cell diffBackground"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>

    <div class="row">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>

    <div class="row">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>

  </div>

  <div>
    <button>Left</button>
    <button>Right</button>
    <button>Up</button>
    <button>Down</button>
  </div>
</div>