Настройка высоты и ширины a:link с помощью CSS

Быстрый ответ

Для задания конкретных значений высоты и ширины элементу <a>, его следует превратить в inline-block:

a:link {
  display: inline-block;
  height: 50px;
  width: 100px;
}

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

Примечание к строчным a:link

При стилизации элементов <a> ключевую роль играет свойство display. Тег <a> по умолчанию принимает строчное отображение и игнорирует свойства height и width. Переключение его в режимы block или inline-block позволяет задать нужные размеры.

Применение block для вертикального расположения

Используйте block, если хотите расставить ссылки одну под другой:

a:link {
  display: block;
  width: 100%; /* Ширина ссылки теперь равна ширине родительского контейнера.
                 Это отлично подходит для полноразмерных кнопок меню или выделенных call-to-action ссылок. */
  height: 30px; /* Вы можете установить высоту как вам удобно */
}

Подробнее об этом расскажет наш спикер на видео

Использование inline-block для сохранения потока

В качестве альтернативы, inline-block позволяет элементам <a> оставаться в текстовом потоке, но при это задает им размеры:

a:link {
  display: inline-block;
  height: 50px;
  width: 100px;
}

Это отличный способ преобразовать ссылки в визуально привлекательные кнопки в тексте.

Адаптация a:link в списке навигации

Для равномерного расположения навигационных ссылок настройте стили элементов <li> и <a>:

li {
  width: 100px; /* Устанавливает фиксированную ширину для каждого элемента списка. */
}

a:link {
  display: block;
  width: 100%; /* Ссылка теперь занимает всю доступную ширину элемента списка. */
}

Как только ссылки отображаются как блочные, можно добавить им float: left, и они выстроятся горизонтально:

li {
  float: left;
}

Выравнивание текста для удобства чтения

Также стоит подумать о центровке текста внутри ссылки для улучшения читаемости и визуальной привлекательности:

a:link {
  text-align: center; /* Текст в ссылке идеально выравнивается по центру блока */
}

Обратите внимание на свойство line-height, оно очень полезно при настройке высоты, особенно если текст занимает только одну строку:

a:link {
  line-height: 30px; /* Так текст будет вертикально центрирован в ссылке.
                        Это важно для визуальной привлекательности. */
}

Разбирательство с помощью специфичности CSS

Убедитесь, что ваш CSS-селектор точно нацелен на нужные элементы <a>:

#navigation a:link { /* Селектор с высокой специфичностью, ограничивающий область применения только навигационными ссылками */
  /* Здесь могут быть ваши стили */
}

Будьте осторожны с конфликтующими правилами CSS, которые могут повлиять на ваши стили:

/* Ближе к концу вашего CSS файла */
a:link {
  display: inline; /* Это изменение незаметно аннулирует предыдущее значение display и может вызвать проблемы */
}

Помните, что в CSS преимущество имеет последнее определенное правило. Последнее слово всегда за ним!

Визуализация

Вообразите наш a:link как дом 🏠, каждую комнату которого можно покрасить в отдельный цвет 🖌️:

🏡 Комнаты a:link: [       ]

a:link {
  display: block;
  width: 100px;
  height: 50px;
  background-color: blue;
}

В итоге получается:

🏡 Комнаты a:link: [🔵🔵🔵🔵🔵]