Как вы можете видеть, флаги расположены слишком далеко друг от друга по вертикали, это происходит, когда я уменьшаю размер браузера.

screen shot

Как я могу это исправить?

.flag {
  width: 15px;
  height: 10px;
  margin-top: 35px;
  margin-bottom: 30px;
}
<input type="image" class="flag" src="flags/china-flag.pdf" href="#">
<input type="image" class="flag" src="flags/india-flag.pdf" href="#">
<input type="image" class="flag" src="flags/united-states-of-america-flag.pdf" href="#">
<input type="image" class="flag" src="flags/indonesia-flag.pdf" href="#">
<input type="image" class="flag" src="flags/pakistan-flag.pdf" href="#">
<input type="image" class="flag" src="flags/brazil-flag.pdf" href="#">
0
Philip Scriver 22 Окт 2019 в 15:30

3 ответа

Лучший ответ

Спасибо за вашу помощь товарищи кодеры! Я обнаружил проблему, у меня были другие div, которые мешали div class = flag.

0
Philip Scriver 22 Окт 2019 в 12:46

Удалите свойства margin-top и margin-bottom. Смотрите пример ниже.

.flag {
  width: 15px;
  height: 10px;
}
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />

<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />

<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />

<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />

<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />

<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />

<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
1
Nitheesh 22 Окт 2019 в 12:36

Вы применяете margin-top и margin-bottom к каждому элементу класса .flag. Вместо этого примените поля к контейнеру, который содержит все флаги. Поля в классе .flag должны быть меньше, чтобы сделать флаги ближе.

Также обратите внимание: требуется либо верхнее, либо нижнее поле.

0
Akshit Mehra 22 Окт 2019 в 12:35
58504347