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

Question

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

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

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

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

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

Answer 1

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

a {
    display: block;
}

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

См. описание ППК об этом.

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

Answer 2

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

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

Answer 3

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