Problema con los <a>.

[Azer]

Hola gente, espero que estén muy bien. Estoy desarrollando mi primer web con un Doctype Strict, y la verdad maquetar algunos botones (hipervínculos) se me esta volviendo un dolor de cabeza. Quiero que sepan que soy un principiante en esto. Les paso a contar mi problema, y espero me puedan ayudar.

Esta es la forma correcta en la que debo crear mi botón en html:

Código HTML:

<div class="botonespagina">
  <ul>
      <li class="botonizquierda"><p class="textoboton1"><a href="index.html">◄</a></p></li>
  </ul> 

Extracto de Css:

Código HTML:

.botonderecha{
	float:left;
	margin-top:3px;
	margin-right:0px;
	border-radius:4px;
	border:1px solid #000;
}

.textoboton3{
	padding-top:2px;
	font-size:13px;
}

.textoboton3 a{
	display:block;
	height:20px;
	width:22px;
	color:#dbeef5 !important;
}

.textoboton3 a:hover{
	color:#343c56 !important;
}

.botonderecha:hover{
	border:1px solid #434d6e;
	background-color:#dbeef5;
	color:white !important; 
}

El problema con esto es que al estar la etiqueta <a> dentro de <p> siempre que quiero darle padding-top o margin-top a mi texto pasa lo siguiente:

1- Chequeo el código para observar si todo está bien, pero el <a> se me desplaza para abajo:

(El <a> se desplaza para abajo, sin ocupar el espacio que debería ocupar normalmente, lo que no me permite realizar el efecto que busco)
Se que en el Css se puede apreciar que disminuí el alto de mi etiqueta <a> en 2 pixeles menos que en mi etiqueta <p>, pero fue para que mi enlace no traspasara por debajo del botón.

2- Chequeando lo que pasa posicionando el cursor en el espacio que le falta ocupar al <a>, pero que ocupa perfectamente el <p>:

(Desaparece la flecha, cosa que no debería pasar)

3- Chequeando que pasa al posicionar el cursor dentro del espacio que ocupa el <a>:

(Ocurre lo que tiene que pasar segun la propiedad hoover y los valores asignados en el css, pero al <a> le falta completar un par de pixeles por arriba como ya dije)

Bien, creo que me enrolle un poco, la verdad no se si vengo a pedir ayuda o consejos sobre como trabajar, ya que no se que estoy haciendo mal. Espero puedan responder. Saludos, muchas gracias por su atencion!

[kseso?]

No hay concordancia entre el css y el html, aunque supongo que es sólo un despiste y un baile entre derecha-izquierda.

Suprima los <p></p> No los necesita.
Declare los <a> como elementos de bloque y juegue tanto con el padding como line-height para situar el ◄ en su lugar.

Y si puede colocar un enlace, mejor. Más precisas y a medida serán las respuestas que obtenga.

[Azer]

Iniciado por kseso?

No hay concordancia entre el css y el html, aunque supongo que es sólo un despiste y un baile entre derecha-izquierda.

Jaja si perdón, estaba medio despistado al querer explicar mi problema...

Bueno, primero que nada te agradezco mucho ya que pude solucionar mi problema! El botón funciona perfectamente.

Mi css quedo así:

Código HTML:

.botonizquierda a{
	display:block;
	width:22px;
	height:20px;
	background-color:#343c56;
	text-align:center;
	color:#dbeef5;
	font-size:13px;
	font-family:arial;
	float:left;
	margin-left:1px;
	margin-top:3px;
	padding-top:2px;
	border-radius:4px;
	border:1px solid #000;
}

.botonizquierda a:hover{
	color:#343c56 !important;
	border:1px solid #434d6e;
	background-color:#dbeef5;
}

Ahora, me surgió otra duda. A mi etiqueta <a> le asigne un "height" de 22 pixeles, pero cuando le aplicaba mi "padding-top" de 2 px, el cuadrado del botón (cuerpo) crecía 2 pixeles para abajo, cosa que no quería que pasara. Lo solucione dejando el "height" en 20 px, pero aún así me gustaría saber si esto es normal o hice algo mal. Saludos, muchísimas gracias por su tiempo!

[mechaz]

Respecto a lo último, es algo normal.