vertical align and border problem #solved

Question

Hey guys and girls :)
First of all - this post about problem I met during coding.If you don't want to spend much time to check it or can't give usefull advice - please just leave this thread and don't post anythin' :)

Code here:
https://code.sololearn.com/Wdz5Svsbk3J3/#html
It looks different from phones/browsers with different window sizes,but problem appears everywhere as I tested.

Problem description:
1.Text moving up in blocks for some reasons (vertical align doesn't help).
Increasing height doesn't affect vertival position - it's higher then should be anyway.

2.Border problem(It's not border,it's shadow,I called it so just cause it's shorter and looks like a border).
When you hover element - border appears,but...
If you'll check bottom side of border it's too small comparing to top.
We can fix it with just increasing blur-radius,but I feel it too huge so...
And I don't feel it like a real fix :D
That's like avoid real problem instead of searching reasons.

If you have resolution or know reason - i'll be glad to hear anythin usefull :)

P.s. sorry about Russian text inside of menu :D
Guess it should be displayed correct for anyone ...
If not - I'll change it :)

Answer 1

https://code.sololearn.com/W4UO7oGhro4F/?ref=app

Answer 2

@Yaroslav Pieskov
Тоже верно,думал сначала написать красиво -
1.Авто ширину каждому блоку
2.Вычислять суммарную ширину блоков , учитывая marginы через js
3.Писать их в переменную и задавать ширину общую для "широкого" окна браузера и переменную с шириной+marginами одного элемента для девайсов с разрешением ниже...
Но...куда то моя прыткость во всем этом деле пропала, устал я от этой менюхи и начал прописывать везде статичные значения...

ну а переносов быть не должно,отключены же :) Была уже такая проблема с отображением на телефоне.

Answer 3

updated

Answer 4

@Yaroslav Pieskov oh...right...so the reason was in line-height and element-height difference,that's it :D
_______________________________
Благодарю,теперь допер в чем проблема)
Буду использовать таки height+line-height,полагаю,такой вариант и ровнее выглядит и манипулировать им проще,без подбора внутренних отступов)
+ в JQ с этим всем делом обращаться в случае чего куда проще )

Answer 5

c line-height нужно быть аккуратнее, т.к. если текст​ не влезет и перенесется на новую строку, то будет явно не красиво.

лучше ровнять падднигами или любится с display:table на крайний случай.

P.S. flex тоже хорошая вещь

Answer 6

для этого есть flex уже

Answer 7

@Yaroslav Pieskov
Nice Idea :D
But...why text looks wrong with height and aligned without it?(at least it's in the middle with like 2px difference bot\top)

Answer 8

@Yaroslav Pieskov
Ну...с ними не знаком...как и с медиа-квери...решаем чем умеем :)

Answer 9

тут неплохо flex описали http://html5.by/blog/flexbox/