Почему высота блока больше своего содержимого?

Question

[Neuro]

Почему блок menu-item больше своего содержимого? и можно ли это как то исправить?

стили

.menu-item {
  cursor: pointer;
  position: relative;
  padding-right: 35px;

  &:hover {
    background: #f3f3f3;
  }

  .menu-item-text {
    line-height: @itemLineHeigth;
    padding-left: 10px;
  }
  .menu-item-text-small {
    margin: 0;
    padding: 0;
    font-size: 0.8em;
    line-height: 0.8em;
    padding-left: 10px;
    padding-top: 5px;
    color: #666;
  }

  .menu-item-icon {
    position: absolute;
    top: 0;
    right: 0;
  }
}

Comments

[leni_m]

где скрин menu-item-text?

[Шохрух Шаймардонов]

ссылку киньте, попробую посмотреть, вдруг не там смотрите

[Neuro]

leni_m,

menu-item-text

menu-item-text-small

[Neuro]

Шохрух Шаймардонов, увы, локалхост)

[Шохрух Шаймардонов]

Neuro, мб песочница? ну а пока можете поискать не напрямую в .menu-item а в соседних селекторах, возможно где-то выше прописана высота для класса/тега

[Neuro]

Шохрух Шаймардонов, вряд ли смогу вам показать код в живую, с соседними селекторами вроде всё в порядке, вот на скрине те же классы только выше но у них отступов нет

spoiler

[RAX7]

Neuro, у вас в строчный span.menu-item-text вложен блочный p.menu-item-text-small - это не есть хорошо.
В консоле посмотрите на $$('.menu-item-text')[0].textContent будет типа:

"Lorem ipsum dolor.↵      Lorem ipsum dolor sit amet.↵    "

, то есть три строки текста и последняя строка пустая.
https://jsfiddle.net/RAX7/o96sk05y/

[Neuro]

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

[RAX7]

Neuro, паддинг можно и оставить, он тут ни при чем)

Answer 1

[RAX7]

У вас в строчный span.menu-item-text вложен блочный p.menu-item-text-small - это не есть хорошо.
В консоле посмотрите на $$('.menu-item-text')[0].textContent будет типа:

"Lorem ipsum dolor.↵      Lorem ipsum dolor sit amet.↵    "

, то есть три строки текста и последняя строка пустая.
https://jsfiddle.net/RAX7/o96sk05y/1/

Answer 2

[Анатолий Куликов]

Потому что блоки внутри его "выталкивают". Посмотрите внимательнее, скорее всего какие-то правила (могут быть вендорные) в этом виноваты.