button {color:brown;}
body {background-color: blue; padding: 1    px; margin: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;}
header {background-color: bisque; font-size: 5rem;}
footer {background-color: blueviolet; padding: 10px;}

/* Zbavíme tabulku jejích vrozených mezer */
table {
  border-collapse: collapse; /* Magický příkaz: Srazí všechny buňky na doraz k sobě */
  border-spacing: 0;         /* Pro jistotu vynuluje i dodatečné mezery */
}

/* Smažeme vnitřní prostor buněk */
td {
  padding: 0;   /* Odstraní výchozí "vycpávku" kolem tvého tlačítka */
  border: none; /* Skryjeme rámeček samotné buňky, rámeček bude mít až tlačítko */
}

.playfieldButton {
  display: block; /* Tohle je ten magický zabiják svislých mezer! */

  width: 30px;            /* Pevná šířka */
  height: 30px;           /* Pevná výška */
  margin: 0;              /* Tvůj původní správný nápad */
  padding: 0;
  
  /* Tento příkaz zajistí, že případný rámeček (border) 
     nezvětší tlačítko nad 30x30 pixelů */
  box-sizing: border-box; 
  /* Abychom tlačítka od sebe vizuálně rozeznali, když jsou nalepená na sobě */
  border: 1px solid #777; 
}

.playfieldButton-covered {
  background-color: #ccc;
  cursor: pointer;        /* Změní kurzor na ručičku po najetí myší */
}
.playfieldButton-covered:hover {background-color: aquamarine;}

.playfieldButton-uncovered {background-color: green;}
.playfieldButton-mine {background-color: red;}