Странный пробел из-за другого блока?

Question

Помогите пожалуйста избавиться от непонятного пробела. Этот вопрос, скажем так продолжение предыдущего моего вопроса, т.к. я думаю понял откуда берутся эти пробелы. Я заметил, что когда я добавляю div перед ul, то под последним li появляется пробел. Без этого div все нормально.

Исходный код:

* {
  padding: 0;
  margin: 0;
}

.main {
  width: 20%;
  margin: 50px;
}

ul {
  list-style: none;
  background-color: whitesmoke;
  border: 1px solid black;
  border-radius: 5px;
  overflow: hidden;
}

li {
  border-bottom: 1px solid black;
}

li:last-child {
  border: none;
}

a {
  display: block;
  text-decoration: none;
  color: black;
  padding: 10px 10px;
}

li:hover {
  background-color: rgba(0, 0, 0, 0.9);
}

<div class="main">
  <div class="search">
    <input type="text" placeholder="Поиск...">
  </div>
  <ul>
    <li><a href=""><img />Russia</a></li>
    <li><a href=""><img />China</a></li>
    <li><a href=""><img />USA</a></li>
    <li><a href=""><img />France</a></li>
    <li><a href=""><img />Germany</a></li>
  </ul>
</div>

Почему этот пробел появляется и как от него избавиться? На компьютере есть проблема, на телефоне нет. На другом телефоне уже есть.

Answer 1

Проблема заключается в этом блоке, а точнее в input

<div class="search">
  <input type="text" placeholder="Поиск...">
</div>

У данного инпута присутствует бордер стандартный 2px, и как раз из-за него происходит данный сдвиг.

БЛОГ НА HUSL

Странный пробел из-за другого блока?

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