Почему у меня под каждым блоком появляется полоска, если использую box-shadow?

Question

[Сергей Бурдужа]

Добрый день.
Вот ссылка на сайт brother.host1670806.hostland.pro

Можете подсказать, откуда полоска появляется?
А точнее, почему высота блока на 2px больше чем высота картинки.

Я уже запарился код проверять.

Заранее благодарен за подсказку.

Comments

[Михаил]

img
display block
или
vertical-align: middle;

[Сергей Бурдужа]

Михаил, Так у меня у слайдера и стоит display: block.

[Сергей Бурдужа]

Вопрос на половину решен, у нижних блоков получилось убрать полоску, задав картинке display block.

Спасибо, что ответили.

[Михаил]

Сергей Бурдужа,

.slider-wrap .slider__item {
  vertical-align: top;
}

[Максим]

Сергей Бурдужа, у Вас высота изображения меньше, чем высота родительского элемента, в котором оно находится, оттуда и полоса снизу. Попробуйте растягивать изображение на всю высоту родительского элемента.

[Сергей Бурдужа]

Михаил, не работает.

[Сергей Бурдужа]

Максим Черябушкин, я поставил height 100%, но это не работает. Тут что-то другое.

[Михаил]

Сергей Бурдужа, у меня работает

[Максим]

Сергей Бурдужа, поставьте min-height: 100%

[Сергей Бурдужа]

Михаил, Извините, просто я работаю через gulp в хроме, а он зараз все время все кэширует.
Теперь и у меня сработало.
Спасибо вам огромное.

Можете переответить, чтобы сделать ваш ответ отмеченным?

[Михаил]

Сергей Бурдужа, консоль откройте, кэширует не gulp а браузер

[Сергей Бурдужа]

Михаил, я знаю, что gulp))
Просто мне сегодня страницу нужно закончить и сильно тороплюсь))
Спасибо еще раз, что выручили))

Answer 1

[Михаил]

Проблема в тексте, точнее в шрифте/высоте строки, https://stackoverflow.com/questions/10844205/html-...

Решение:

img {
  display: block;
  /* или */
  vertical-align: middle;
}

В частности

.slider-wrap .slider__item {
  vertical-align: top;
}