Проблема с логотипом при верстке макета, как убрать отступ у logo?

Question

[Underdoggit]

Нужна помощь, взял произвольный макет, и сверстал его, но осталась проблема с логотипом. Между изображением и контейнером зазор примерно в 2px, и он никак не убирается, отсутствуют margin\padding, и прочие плюхи. Заранее спасибо за помощь.
Макет - https://artrises.github.io/

Comments

[Иван]

для таких случаев можно использовать отрицательный маржин
.header-logo:{
margin-bottom:-1px;
}

[Underdoggit]

Иван, зазор минимальный все равно остался, даже при заданном margin-bottom: -6px, мешает line-height в normalize, и он не убирается. Но все равно спасибо, теперь зазор не сильно бросается в глаза

Answer 1

[eLig]

.align-content-center {
-ms-flex-line-pack: center!important;
align-content: center!important;
line-height: 0;
}
или
.header-nav .align-content-center {
-ms-flex-line-pack: center!important;
align-content: center!important;
line-height: 0;
}

Comments

[Underdoggit]

Спасибо, отступ ушел

Answer 2

[Nick Krogan]

для img попробуйте display: block поставить и добавить margin-top: 1px

Answer 3

[Senseich]

добавьте к .header-logo img { vertical-align: bottom; } и сделайте марджин поменьше меню на 1 px .header-menu {margin: 9px;}
Как то так )

Comments

[Senseich]

Underdoggit, либо добавить display: block к .header-logo img

[Underdoggit]

Разобрался в чем проблема, теперь осталось решить ее безболезненно, у header-nav - в инспекторе нашел line-height 1,5 который добавлен от normalize css, при попытке убрать его в инспекторе - ползет весь макет, при попытке убрать только его - в css, не помогает даже important. 2 предыдущих способа не помогли(

[Senseich]

Underdoggit, касательно вашего вопроса всё работает: prntscr.com/j2iea4 , не понятно при чём здесь line-height

Answer 4

[Владислав Бойченко]

Раз уже используете 4-ый бутстрап, для вертикального выравнивания можно использовать
align-items: center
Это даст вам возможность убрать отступы у меню (сверху и снизу) и у телефонов (сверху). После этого логотипу также задайте:

.header-logo
  font-size: 0

Таким образом отступ пропадет.

Answer 5

[Underdoggit]

Разобрался в чем проблема, теперь осталось решить ее безболезненно, у header-nav - в инспекторе нашел line-height 1,5 который добавлен от normalize css, при попытке убрать его в инспекторе - ползет весь макет, при попытке убрать только его - в css, не помогает даже important. 2 предыдущих способа не помогли(

Вертикальное выравние дива лого не помогает, так как он и так занимает 98% блока, и задавая флекс родителю, и прописывая align ничего не происходит.
Единственный выход убирать line-height из normalize и равнять заново?

Answer 6

[AlexandrKom]

!important - deprecated
отрицательные отступы - deprecated
советую БЭМ и независимые блоки - это поможет вам сделать адекватный адаптив, быстро и эффективно работать с большими проектами, сохранить естественный цвет ушей при работе в коллективе.
Изучите flex и используйте его грамотно, то, что есть сейчас не гуд.
А по вопросу
prntscr.com/j2z9xk