[Resolvido] Link e a:hover em div

Boa tarde pessoal !!!

Sou novo no CSS porém surgiu uma dúvida que nao consigo resolver. Tenho uma div onde quero colocar um efeito hover porém não estou conseguindo obter o resultado e o tamanho tambem não redimenciona:

CSS

.caixa {
width: 100px;
height: 100px;
border: 2px solid #000;
margin: 20px;
padding: 5px;
}

.caixa a:hover{

width: 100px;
height: 100px;
border: 2px solid #CCC;
margin: 20px;
padding: 5px;
}

HTML

<p><a href="#"><span class="caixa"></span></a></p>

1 - Os elementos width e height não estao respeitando o valor de 100px.

2 - O efeito a:hover não funciona.

-------------------------------------------------------------------------

Eu consegui fazer no proprio elemento de linha "a href" tive q transforma-lo em elemento de bloco usando o display:block; porem gostaria de aprender a utlizar esse modo para poder ter mais controle dos seletores, nao quero q todo conteudo "a href" pegue essa formatação valeu!!