Cómo acercar los elementos de la misma clase verticalmente

Question

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="#">

html css

0

Philip Scriver 22 oct. 2019 a las 15:30

Answer 1

¡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

Answer 2

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

Answer 3

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

Cómo acercar los elementos de la misma clase verticalmente

3 respuestas

Nuevas preguntas

html