Establecer un ancho y alto en una etiqueta A

¿Es posible establecer el ancho y la altura en píxeles en una etiqueta de anclaje? Me gustaría tener la etiqueta de anclaje para tener una imagen de fondo mientras se retiene el texto dentro del ancla.

li {
  width: 32px;
  height: 32px;
  background-color: orange;
}

li a {
  width: 32px;
  height: 32px;
  background-color: red;
}

<li><a href="#">Something</a></li>

Que necesita para hacer su ancla display: blocko display: inline-block;y luego se va a aceptar los valores de anchura y altura.

También puedes usar display: inline-block . La ventaja de esto es que establecerá la altura y el ancho como un elemento de bloque, pero también lo configurará en línea para que pueda tener otra etiqueta justo al lado, permitiendo el espacio principal.

Puede encontrar más información sobre las propiedades de visualización aquí

Todas estas sugerencias funcionan a menos que coloque los anclajes dentro de una lista UL.

<ul>
    <li>
        <a>click me</a>>
    </li>
</ul>

Luego, cualquier regla de hoja de estilo en cascada se anula en el navegador Chrome. El ancho se vuelve automático. Luego debe usar reglas CSS en línea directamente en el propio ancla.

No es un duplicado exacto (por lo que puedo encontrar), pero este es un problema común .

display:blockes lo que necesitas pero deberías leer las especificaciones para entender por qué.

Abajo trabajando para mí

display: block;
width: 100%;