Проблемы с элементом

Question

Делаю оверлей эффект(когда поверх изображения появляется цветной фон с надписью или без). Когда использую спан, появляется ненужный отступ снизу, который я не могу убрать. Что делать?

(не велите казнить, только начинаю)

main {
  display: flex;
  flex-direction: row;
  flex-shrink: 1;
  flex-wrap: wrap;
}

span {
  position: relative;
  width: 25%;
  height: 25%;
  margin: -1px;
}

.items {
  width: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #21bfb9;
}

.overlay:hover {
  opacity: 1;
}

<main>
  <span>
        <img src="img/image-1.png" class="items">
        </span>
  <span>
        <img src="img/image-2.png" class="items">
        <span class="overlay">
            <a href="#" class="icon">
              <i class="pe-7s-look"></i>
            </a>
        </span>
  </span>
  <span>
        <img src="img/image-1.png" class="items">
        </span>
  <span>
        <img src="img/image-2.png" class="items">
        </span>
  <span>
        <img src="img/image-2.png" class="items">
        </span>
  <span>
        <img src="img/image-1.png" class="items">
        </span>
  <span>
        <img src="img/image-2.png" class="items">
        </span>
  <span>
        <img src="img/image-1.png" class="items">
        </span>
  <span>

Вот как это выглядит:

Answer 1

Это синдром инлайна. Вы используете специфичный элемент <span>, который вот с таким поведением. Добавил в код line-height: 0;, отступы как рукой сдуло!...

main {
  display: flex;
  flex-direction: row;
  flex-shrink: 1;
  flex-wrap: wrap;
}

span {
  position: relative;
  width: 25%;
  height: 25%;
  line-height: 0;
}

.items {
  width: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #21bfb9;
}

.overlay:hover {
  opacity: 1;
}

<main>
  <span>
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='8'%3E%3Cpath d='m0,0h8v8H0V0Z'%20fill='%23888'/%3E%3C/svg%3E" class="items">
        </span>
  <span>
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='8'%3E%3Cpath d='m0,0h8v8H0V0Z'%20fill='%23eee'/%3E%3C/svg%3E" class="items">
        <span class="overlay">
            <a href="#" class="icon">
              <i class="pe-7s-look"></i>
            </a>
        </span>
  </span>
  <span>
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='8'%3E%3Cpath d='m0,0h8v8H0V0Z'%20fill='%23888'/%3E%3C/svg%3E" class="items">
        </span>
  <span>
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='8'%3E%3Cpath d='m0,0h8v8H0V0Z'%20fill='%23eee'/%3E%3C/svg%3E" class="items">
        </span>
  <span>
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='8'%3E%3Cpath d='m0,0h8v8H0V0Z'%20fill='%23eee'/%3E%3C/svg%3E" class="items">
        </span>
  <span>
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='8'%3E%3Cpath d='m0,0h8v8H0V0Z'%20fill='%23888'/%3E%3C/svg%3E" class="items">
        </span>
  <span>
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='8'%3E%3Cpath d='m0,0h8v8H0V0Z'%20fill='%23eee'/%3E%3C/svg%3E" class="items">
        </span>
  <span>
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='8'%3E%3Cpath d='m0,0h8v8H0V0Z'%20fill='%23888'/%3E%3C/svg%3E" class="items">
        </span>
  <span>
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='8'%3E%3Cpath d='m0,0h8v8H0V0Z'%20fill='%23888'/%3E%3C/svg%3E" class="items">
        </span>
  <span>
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='8'%3E%3Cpath d='m0,0h8v8H0V0Z'%20fill='%23eee'/%3E%3C/svg%3E" class="items">
        </span>
  <span>
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='8'%3E%3Cpath d='m0,0h8v8H0V0Z'%20fill='%23888'/%3E%3C/svg%3E" class="items">
        </span>
  <span>
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='8'%3E%3Cpath d='m0,0h8v8H0V0Z'%20fill='%23eee'/%3E%3C/svg%3E" class="items">
        </span>
  </main>

БЛОГ НА HUSL

Проблемы с элементом

Ответы (1 шт):