Definindo uma largura e altura em uma tag A


131

É 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>

Respostas:


288

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


66

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


Eu estava procurando uma solução para definir a largura da marca âncora como seu conteúdo de texto e não em uma certa largura e altura, portanto, defini-la como "bloco embutido" fez o truque exatamente. Obrigado.
TheCuBeMan

7

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.



Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.