Как сдвинуть select?

Question

[Pbalordorbaor]

https://codepen.io/natojezlo/pen/orEped
нужно сместить тег select чуть вверх, как это сделать? margin'ом сдвигается хоть куда, только не вверх

Answer 1

[Владимир Проскурин]

Не надо никакого margin/padding, это все костыли. Блоку нужно пространство, дайте его ему. У вас проблема с тегом a, у него очень высокий дочерний элемент, а сам тег a является инлайновым. Вот такой стиль пропишите для a

margin-left: 20%;
display: inline-block;
height: 100%;
vertical-align: middle;

https://codepen.io/anon/pen/mZXxxq

Comments

[Владимир Проскурин]

Qlink, ну не совсем. Почему? Можно конечно использовать флексы, или сделать a display: inline-block, и убрать этот непонятный margin. Но в данном случае, это не такой уж и костыль, мы сделали элементу a высоту равную высоте картинки, и выравняли по вертикале. Ну только margin-left этот бесит, а так, норм.

[Pbalordorbaor]

можно обьяснение что делают display: inline-block и vertical-align: middle для тупых? В документации написано слишком сложным языком

Answer 2

[Виктор Щербаков]

Как вариант: https://jsfiddle.net/VShcherbakov/f58tz17s

.select {
  background-color: #4b72cd;
  color: #fff;
  border: 0;
  padding: 0;
  margin-left: 70px;
  position: absolute;
  margin-top: 8px;
}

Comments

[Pbalordorbaor]

Tahir, ну вообще смещается как раз вверх, только хорошо бы обьяснения получить какой магией это было сделано, ведь margin-top у меня смещал вниз

Answer 3

[Дмитрий Дерепко]

display: block или двигайте контейнер, в котором лежит select
margin на inline элементах не работает

Comments

[Rustam Bainazarov]

Qlink, Дмитрий Дерепко, margin работает, но с не полностью, с оговорками и особенностями (отрицательный, вертикальный margin, зависимость от контекста и т. п.):
https://www.w3.org/TR/CSS21/visuren.html#inline-fo...

[Rustam Bainazarov]

Qlink, не-не, я просто тезис автора ответа отверг, а ваш комментарий — дополнил. С вами же я согласен.

Answer 4

[amahov]

Самый простой способ:

.select {
  position:relative;
  top:-10px;
}

Answer 5

[AndrexMaster]

Я не до конца уверен, но не будет ли более правильно добавить флекс и отталкиваться уже от него?

.navbar {
    background-color: #4b72cd;
    width: 100%;
    height: 7%;
    position: fixed;
    margin-left: 0px;
    margin-top: 0px;
    display:flex;
}