Border дочернего элемента увеличивает высоту родителя, как исправить?

Question

[Dymok]

Задал свойство для элемента меню, теперь при наведении на элемент меню увеличивается высота родителя и это заметно, можно ли как-то избавиться от этого?

.navigation li:hover {
    border-bottom: 2px solid white;
    transition: none;
}

robbien.ru/demo/brandly1

Answer 1

[Дмитрий Локшин]

.navigation li {
    border-bottom: 2px solid transparent;
    transition: none;
}

.navigation li:hover {
    border-bottom: 2px solid white;
    transition: none;
}

Answer 2

[Михаил]

Нужно для li поставить border изначально, но прознрачный, а при ховере менять цвет.

.navigation li {
    border-bottom: 2px solid transparent;
}
.navigation li:hover {
    border-color: white;
}

Answer 3

[Alex McArrow]

Попробуйте так:

.navigation li:hover {
    border-bottom: 2px solid white;
    transition: none;
    margin-bottom: -2px;
}

Comments

[Dymok]

Спасибо, получилось

[Михаил]

UnluckySerivelha, плохое решиение, необходимо максимально избегать различных хаков с помощью отрицательных margin'ов

[Дмитрий Локшин]

Михаил, Согласен.

[Alex McArrow]

Михаил, Дмитрий Локшин, без претензий - просто для интереса. Можно пример в котором это будет проблемой?

[Дмитрий Локшин]

Alex McArrow, Выравнивание по центру, когда тоже применяют отрицательные margin'ы, а контент обычно динамический, да и даже при адаптивности, высота элемента становится другой, и все - хак с margin не пройдет.
В данном случае, заказчик, например, захочет поменять высоту подчеркивания, и ведь проще изменить одно свойство, чем искать еще второе, особенно если такие исправления будет делать другой разработчик.
Есть и другие примеры, просто не хочется время терять...

[Alex McArrow]

Дмитрий Локшин, большое спасибо.
UnluckySerivelha - согласен, лучше используйте вариант с прозрачностью.

[Dymok]

Alex McArrow, имеете в виду так?

.navigation li {
    display: inline-block;
    border-bottom: 2px solid rgba(255,255,255,0);
}

.navigation li:hover {
    border-bottom: 2px solid rgba(255,255,255,100);
    transition: none;
}

[Alex McArrow]

UnluckySerivelha, да.
или

.navigation li {
    border-bottom: 2px solid transparent;
    transition: none;
}

.navigation li:hover {
    border-bottom: 2px solid white;
    transition: none;
}

или

.navigation li {
    border-bottom: 2px solid transparent;
}
.navigation li:hover {
    border-color: white;
}