Muchos principiantes han encontrado un problema al escribir una página. Cuando envolvemos el img directamente con un div, aparecerá un espaciado de 3px debajo del img, como se muestra en la figura
Código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
.box {
border: 2px solid red;
}
</style>
</head>
<body>
<div class="box">
<img src="img/4.png">
</div>
</body>
</html>
¿Cuál es la razón?
Img es un elemento de etiqueta similar al texto. Al final, se agregará un carácter en blanco (texto anónimo) al final, lo que dará como resultado un espacio adicional de 3px debajo. De hecho, agregamos un espacio a la derecha de img para envolver el texto. Será más obvio
Hay cinco formas de resolver los problemas anteriores.
el primer método:
Establezca la misma altura para el div que el img;
desventaja: este método no es lo suficientemente flexible, una vez que cambia el tamaño de img, tenemos que restablecer la altura del div
El segundo método:
Img para establecervertical-alignenbaselineun valor diferente al utilizado
El tercer método:
Agregue display: block al img;
este método es más comúnmente utilizado por nosotros, pero debe tenerse en cuenta que una vez que el img se establece como un bloque, text-align: center; ya no tendrá efecto. El centrado horizontal de la imagen debe usar margin: auto;
El cuarto método:
Img set to float
set flotará fuera del flujo de documentos. Img.
Inconveniente: la altura del elemento principal no se estirará automáticamente img
El quinto método:
Establecer en divfont-size:0;
Desventajas: este método hará que el texto desaparezca div
Elige el método correcto según la situación real; ¡haz que mi diosa sea más perfecta!
