Como puede ver, las banderas están demasiado separadas verticalmente, esto sucede cuando encojo el navegador.

screen shot

¿Cómo puedo arreglar esto?

.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 oct. 2019 a las 15:30

3 respuestas

La mejor respuesta

¡Gracias por su ayuda, compañeros codificadores! Encontré el problema que tenía otros divs que estaban interfiriendo con el div class = flag.

0
Philip Scriver 22 oct. 2019 a las 12:46

Elimine las propiedades margin-top y margin-bottom. Ver el siguiente ejemplo.

.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 oct. 2019 a las 12:36

Estás aplicando margin-top y margin-bottom a cada elemento con la clase .flag. En su lugar, aplique los márgenes a un contenedor que contenga todas las banderas. Los márgenes en la clase .flag deberían ser menores para acercar las banderas.

Además, tenga en cuenta: se requiere el margen superior o inferior.

0
Akshit Mehra 22 oct. 2019 a las 12:35