Установка ширины и высоты в теге A

Можно ли установить ширину и высоту в пикселях для тега привязки? Я хотел бы иметь тег привязки, чтобы иметь фоновое изображение при сохранении текста внутри привязки.

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

li a {
  width: 32px;
  height: 32px;
  background-color: red;
}
<li><a href="#">Something</a></li>

Ответы

Ответ 1

Вам нужно сделать якорь display: block или display: inline-block;, а затем он примет значения ширины и высоты.

Ответ 2

Вы также можете использовать display: inline-block. Преимущество этого заключается в том, что он установит высоту и ширину как элемент блока, но также установит его в линию, чтобы вы могли иметь еще один тег, расположенный рядом с ним, разрешая родительское пространство.

Вы можете узнать больше о свойствах отображения здесь

Ответ 3

Все эти предложения работают, если вы не помещаете якоря в список UL.

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

Затем любые правила таблицы каскадного стиля переопределяются в браузере Chrome. Ширина становится автоматической. Затем вы должны использовать встроенные правила CSS непосредственно на самом якоре.