[HTML] pobierz, plaintext 
.field
{
    padding-top:0px;
    display:inline-block;
    width:5px;
    height:5px;
    background:black;
    margin-left:1px;
    margin-top:1px;
}
.field:hover
{
    resize: both;
    background:red;
    width:10px;
    height:10px;
    transition: all 100ms ease;
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
http://zapodaj.net/images/0e30df1cfa8fb.png
[HTML] pobierz, plaintext 

No i pytanie jak wyzerować margin-top? bo nie łapie za cholerę a chciałbym uzyskać jednakową mapę gry.

http://jsfiddle.net/g4GpN/4/

Tak nie pójdzie niestety.

[HTML] pobierz, plaintext 
var height = 25;
var width = 40;
var world=[];
 
function alive(){}
function create_game(){
    world = [];
    var cell = "";
    for(var h = 0; h < height; h++){
        world[h]=[];
        for(var w = 0; w < width; w++){
        cell += '<div class="field"></div>';
        world[h][w];
        }
        cell += '<br/>';
    }
    document.getElementById("world").innerHTML=cell;
}
 
[HTML] pobierz, plaintext 

Ja tu korzystam z <br/> i to jego odstęp muszę zniwelować. Nie mogę narzucić stałej szerokości diva dlatego że rozmiar planszy jest dynamiczny.

http://jsfiddle.net/g4GpN/5/