Cuando se trata de elementos en línea dentro de elementos de bloque, no tiene muchas opciones para cambiar el tamaño de su cuadro delimitador. min-height no funciona en elementos en línea, y line-height no tendrá ningún efecto.
Establecer una apropiada padding puede ser una opción razonable, pero es probable que tenga problemas con el fondo del elemento superponiendo otros elementos dentro del bloque contenedor.
Como demostración rápida, intente esto:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style type="text/css">
span {
background: #0F0;
padding: 0.5em 0;
}
</style>
</head>
<body>
<p>This is some demo text. Look at how <span>texty</span> it is.</p>
</body>
</html>
Vas a ver que el fondo del tramo texty se expande verticalmente, sino que va a superponen texto en líneas anteriores y posteriores. Puede establecer la propiedad display del elemento en inline-block en los navegadores modernos para evitar este problema, pero tendrá un espacio de línea incoherente, lo que casi con seguridad le distraerá si está dentro de un bloque de texto.
Creo que su mejor opción, les guste o no, es simplemente para asegurarse de que la imagen que desea aplicar a sus enlaces se ajuste al texto que se mostrará.
muchas gracias por esa {: – saji