ul>li>a padding top/bottom

108

17 февраля 2021, 02:10

Пытался задать padding ссылке в списке, но работает только правый и левый. Верхний и нижний тоже задаётся, но ссылка не растягивает при этом высоту li.

Вот наглядный пример:

Пытался создавать пустой index.html, куда помещал только это меню, без каких либо подключенных стилей, вертикальные padding так же игнорировались.

Есть ли способ решить или обойти эту проблему? line-height не подойдёт, т.к. есть кнопки, которые не влазят в 1 строку.

Answer 1

Потому что a - строчный элемент. Padding на самом деле работает, но не выбивает их из строки. Вот:

ul > li:nth-child(1) > a { 
  padding: 15px; 
  border: 2px solid red; 
} 
ul > li:nth-child(2) > a { 
  padding: 15px; 
  border: 2px solid green; 
}

<ul> 
  <li><a>Тест</a></li> 
  <li><a>Тест</a></li> 
</ul>

Проблема решается, если добавить им, например, display: inline-block;

Answer 2

Потому что padding надо задавать для li. Или задать margin для a

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как через js записать стиль css?

Я пробовал через documentwrite() записать в тег <style></style> стиль css, но не вышло

103

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

c++

ul>li>a padding top/bottom

Как через js записать стиль css?

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

Массово изменять свойства QComboBox

Шаблонная функция для вывода stack, queue и priority_queue