CSS - Почему я не могу установить высоту и ширину <a href> элементов?

Я пытаюсь создать кнопки CSS, используя следующую HTML-разметку:

<a href="access.php" class="css_button_red">Forgot password</a>

Но в итоге получается не больше, чем текст посередине. Хотя я установил высоту и ширину класса.

Вы можете просмотреть проблему здесь, кстати, www.matkalenderen.no Обратите внимание на первую кнопку, кнопку формы и ее собственный класс. Сначала я попытался использовать тот же класс на кнопке css, и появилась та же проблема, поэтому я попытался разделить их на свои классы. На случай, если произошла какая-то авария. Но это все равно не имело значения.

Что мне здесь не хватает?

Ответ 1

Как уже говорили другие, по умолчанию <a> является встроенным элементом, а встроенные элементы не могут указывать ширину или высоту. Вы можете изменить его на блочный элемент:

a {
    display: block;
}

Хотя тогда он будет отображаться (что неудивительно) в виде блока, который сам по себе находится вне потока окружающего текста. Лучшее решение - использовать display: inline-block, который может быть лучшим решением для обоих миров в зависимости от вашей ситуации.

См. описание РПК.

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

Ответ 2

Потому что & lt; a> являются встроенными элементами по умолчанию. В CSS определите a { display:block; }, и будут применены настройки высоты и ширины.

Конечно, вы можете не захотеть объявлять все теги привязки как элементы уровня блока, поэтому при необходимости фильтруйте по классу или идентификатору.

Ответ 3

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