Почему не увеличивается расстояние между пунктами меню виджета?

Question

[andrey_levushkin]

Сам сайт:
zorgosoft.xyz
На нём слева виджет с "меню"
Расстояние между пунктами увеличиваю так:

#masthead li a {
line-height: 300%;
}

Но почему-то не увеличивается расстояние между пунктами меню где пункт состоит из двух слов, которые переносятся построчно.

Таким образом уменьшал расстояние между строками в каждом пункте меню, состоящем из двух слов:

#menu-item-33
{
	line-height: 100%;
}
#menu-item-32
{
	line-height: 100%;
}
#menu-item-31
{
	line-height: 100%;
}
#menu-item-30
{
	line-height: 100%;
}

Comments

[Ankhena]

1. Расстояние между пунктами меню регулируется отступами. margin или padding в зависимости от дизайна.

Если отступы задаются ссылке, то дополнительно необходимо задать им display block или inline-block.

2. Старайтесь не использовать id для стилизации, не делайте себе проблем на будущее. Используйте классы. Так вы избавитесь от повторов кода как у вас в примере.

3. line-height правильно задавать коэффициентом без использования единиц измерения. Тогда вы получите зависимость от шрифта, а не от line-height родителя.

Answer 1

[approximate solution]

.widget-area a {
line-height: 1.6;
}

Дублировать код в виде

#menu-item-33
{
  line-height: 100%;
}
#menu-item-32
{
  line-height: 100%;
}
#menu-item-31
{
  line-height: 100%;
}
#menu-item-30
{
  line-height: 100%;
}

не нужно, достаточно прописать для всех элементов списка одно правило.

Comments

[andrey_levushkin]

Расстояние между каждым пунктом всё равно не изменилось. Только увеличилось расстояние между словами в двухстрочных пунктах

[approximate solution]

andrey_levushkin, .

widget-area li {
margin-bottom: 10px;
}

Помогло?

[andrey_levushkin]

approximate solution, увы, нет.

[approximate solution]

andrey_levushkin,

.widget-area a {
display: block;
padding: 13px 0px;
}

[andrey_levushkin]

approximate solution, по идее, помогло - спасибо. Но теперь расстояние между "одинарными" пунктами меню стало слишком большим и ничем не меняется (line-height: 300%; не помогает)

[approximate solution]

andrey_levushkin,

.widget ul li {
line-height: 1.6;
}

Не задавайте line-height в процентах.

[andrey_levushkin]

approximate solution, Спасибо. Помогло.