Definindo uma largura e altura em uma tag A

É possível definir a largura e a altura em pixels em uma tag de âncora? Eu gostaria de ter a marca de âncora para ter uma imagem de fundo, mantendo o texto dentro da âncora.

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

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

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

Você precisa fazer sua âncora display: blockou display: inline-block;e, em seguida, ele aceitará os valores de largura e altura.

Você também pode usar display: inline-block. A vantagem disso é que ele definirá a altura e a largura como um elemento de bloco, mas também o alinhará para que você possa ter outra tag a bem ao lado, permitindo o espaço pai.

Você pode descobrir mais sobre as propriedades de exibição aqui

Todas essas sugestões funcionam, a menos que você coloque as âncoras em uma lista UL.

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

Em seguida, qualquer regra de folha de estilo em cascata será substituída no navegador Chrome. A largura se torna automática. Então você deve usar regras CSS embutidas diretamente na própria âncora.

Não é uma duplicata exata (tanto quanto posso encontrar), mas esse é um problema comum .

display:blocké o que você precisa. mas você deve ler as especificações para entender o porquê.

Abaixo trabalhando para mim

display: block;
width: 100%;