Как выставить черточки во всю высоту блока?

Question

[Norum]

Как в .icons выставить разделительные черточки во всю высоту хэдера? Они у меня немного не достают до низа
https://jsfiddle.net/Norum87/et5bpnmj/

Comments

[Сергей delphinpro]

Открыть инспектор и все внимательно изучить

[Ankhena]

Можно еще рамочками пообводить всё. Или фоны цветные задать.

В качестве намека: это border не для img. И вообще это не img, а фоны или псевдоэлементы.

[Ivan1331]

А почему бы не сделать через псевдоэлементы? И там уже задать

top:0;
height:100%;

[Ankhena]

Ivan1331, потому что высота родителя меньше высоты хедера.

Answer 1

[Григорий Моргачев]

Ну как вариант это поменять padding.
У вас в коде это так:

@media screen and (max-width: 1200px){
.icons img {
    width: 20px;
    padding: 20px 5px;
}
}

*нужно конечно еще поиграться со значениями, но думаю мысля понятна

Результат:

Answer 2

[Роман Филиппов]

Блок-ссылка (.images a) растягивается по содержимому, тут же у содержимого высота меньше чем у .header, соответственно и border у ссылки определяется по содержимому.

Решение: задать фиксированную высоту для .icons img и отступами отрегулировать высоту ссылок.

.icons a {
    padding...
}
.icons img {
    height...
}