パネル本体が 40px で上下左右に margin を 5px つけることで
想定していた 50px の中に納まっているのはわかるのですが、
この余白は margin で設定した方が良いのでしょうか。

#board の padding と #board li の margin が重なっているのが
イメージし辛くてどうしても気になってしまったのですが
こうしたレイアウトはよく使われるものなのでしょうか。

試しに余白を #board の padding だけになるように 10px から 15px にして、
要素間の余白を gap: 10px; としてみたのですが
この場合何かデメリットがあれば教えていただきたいです。

#board {
  list-style: none;
  margin: 0 0 8px;
  /* padding: 10px; */
  padding: 15px;
  background: #fff;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#board li {
  background: #00aaff;
  width: 40px;
  height: 40px;
  /* margin: 5px; */
  cursor: pointer;
  border-radius: 4px;
  line-height: 40px;
  text-align: center;
  box-shadow: 0 4px 0 #0088cc;
}