Лишняя полоска?

Question

[Август Милович]

Здравствуйте! Есть проблема, вот такой код:

<section class="gallery">
                <div class="item">
                    <img src="img/img1.png" alt="image">
                </div>
                <div class="item">
                    <img src="img/img2.png" alt="image">
                </div>
                <div class="item">
                    <img src="img/img6.png" alt="image">
                </div>
                <div class="item">
                    <img src="img/img4.png" alt="image">
                </div>
                <div class="item">
                    <img src="img/img5.png" alt="image">
                </div>
                <div class="item">
                    <img src="img/img3.png" alt="image">
                </div>
                <div class="item">
                    <img src="img/img7.png" alt="image">
                </div>
                <div class="item">
                    <img src="img/img8.png" alt="image">
                </div>
                <div class="item">
                    <img src="img/img9.png" alt="image">
                </div>
                <div class="item">
                    <img src="img/img10.png" alt="image">
                </div>
            </section>

Стили:

.gallery
  column-count: 3
  column-gap: 30px
  margin-top: 29px

  .item
    background-color: #000
    width: 100%
    margin-bottom: 30px
    border: none

    img
      width: 100%
      transition: .2s ease

  .item:hover
    img
      opacity: .7

При наведении на картинку, фон становится темнее, ну я и решил сделать черный фон у обертки, и прозрачность картинки менять. Только вот обертка почему то длиннее картинки, у меня padding margin обнулен в normalize, я дополнительно проверил, не работает. Откуда отступ - непонятно. Если у кого была подобная проблема, подскажите.

Comments

[RAX7]

для картинок добавь vertical-align: middle

[Август Милович]

RAX7, Что за, почему это вобще работает, не понимаю css после таких моментов. Спасибо)
Лучше написать это в ответы, чтобы я отметил решением

[Rustam Bainazarov]

Август Милович, это работает, потому что img — inline-элемент, который зависит от высоты строки. Ещё один способ решения проблемы:

img {
   display: block;
}

Но лучше vertical-align.

Популярный глобальный сброс тега img:

img {
   max-width: 100%;
   height: auto;
   vertical-align: middle;
}

[RAX7]

Август Милович, для полноценного ответа этого маловато. Если хочешь почитай как работает вертикальное выравнивание для инлайновых элементов https://css-live.ru/articles/obzor-inlajnovyj-kont... и напиши развернутый ответ.

[Rustam Bainazarov]

RAX7, нормально всё, пиши ответ спокойно. Просто вместе со ссылкой.

[RAX7]

Рустам Байназаров, мне лень =)