Como puede ver, las banderas están demasiado separadas verticalmente, esto sucede cuando encojo el navegador.
¿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="#">
3 respuestas
¡Gracias por su ayuda, compañeros codificadores! Encontré el problema que tenía otros divs que estaban interfiriendo con el div class = flag.
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="#" />
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.
Preguntas relacionadas
Nuevas preguntas
html
HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].