Cuando utiliza bloques HTML div y la mitad de los bloques no se puede conectar estrechamente, no se puede hacer nada.
1. Puedes agregar uno en el medio del contenido de <head></head>
* {
margen:0;
relleno: 0;
}
Hacer que el espacio entre todos los bloques sea cero no entra en conflicto con el margen de relleno a continuación.
2. Hay un problema de espacio entre las divisiones superiores e inferiores.
Escribí 4 divs, distribuidos hacia arriba y hacia abajo, con espacios entre ellos. El código y el efecto son los siguientes:
.div1{
altura: 100 px;
color de fondo: azul;
posición: relativa;
}
.div2 {
altura: 100 px;
color de fondo: azulvioleta;
posición: relativa;
}
.div3{
altura: 100 px;
color de fondo: rojo;
posición: relativa;
}
.div4{
altura: 100 px;
color de fondo: amarillo;
posición: relativa;
}
<cuerpo>
<div clase="div1" ></div>
<div clase="div2"></div>
<div clase="div3"></div>
<div clase="div4"></div>
</cuerpo>
Luego, intenté agregar margen:0 a cada div para eliminar el espacio entre divs. El código es el siguiente:
.div1{
altura: 100 px;
color de fondo: azul;
posición: relativa;
margen: 0;
}
.div2 {
altura: 100 px;
color de fondo: azulvioleta;
posición: relativa;
margen: 0;
}
.div3{
altura: 100 px;
color de fondo: rojo;
posición: relativa;
margen: 0;
}
.div4{
altura: 100 px;
color de fondo: amarillo;
posición: relativa;
margen: 0;
}
El resultado se mantiene sin cambios, pero aún existen lagunas, como se muestra a continuación:
A continuación, busqué en Baidu y encontré una manera de configurar el tamaño de fuente. El siguiente código y efecto:
cuerpo{font-size:0;}
.div1{
altura: 100 px;
color de fondo: azul;
posición: relativa;
}
.div2 {
altura: 100 px;
color de fondo: azulvioleta;
posición: relativa;
}
.div3{
altura: 100 px;
color de fondo: rojo;
posición: relativa;
}
.div4{
altura: 100 px;
color de fondo: amarillo;
posición: relativa;
}
El código anterior se centra en agregar cuerpo {font-size: 0;} y el efecto es el siguiente:
Puede ver que se ha eliminado el espacio entre la parte superior e inferior del div. Sin embargo, todavía hay un espacio entre la parte superior y la izquierda.
Esto es lo que hice, agregando body{margin:0px;}, el código es el siguiente:
cuerpo {margen: 0px;}
cuerpo{font-size:0;}
.div1{
altura: 100 px;
color de fondo: azul;
posición: relativa;
}
.div2 {
altura: 100 px;
color de fondo: azulvioleta;
posición: relativa;
}
.div3{
altura: 100 px;
color de fondo: rojo;
posición: relativa;
}
.div4{
altura: 100 px;
color de fondo: amarillo;
posición: relativa;
}
El efecto es el siguiente:
Como puede ver, se han eliminado todas las lagunas.
Sin embargo, todavía hay un problema, es decir, configurar font-size:0 hará que todas las fuentes desaparezcan.
Así es como resolví este problema: agregue un div dentro de un div y restablezca el tamaño de fuente del div interno, por ejemplo: font-size:30px;.
¡Solución perfecta!
3. DIV+CSS claro: ambos solucionan el problema de crear un espacio sobre el div después de flotar.
Sabemos que a veces el uso de css float producirá css float. En este momento, necesitamos borrar el flotante. Podemos usar el atributo de estilo claro para lograr esto.
Sin embargo, después de usar clear:both para borrar los flotadores, a menudo aparece un espacio blanco encima del div donde se aplica clear:both.
La solución es agregar overflow:hidden; al div encima de este div.
<div class="un escondido">
<div class="bms_2_1_1 fl">~Cruzando el océano para verte,</div>
<div class="bms_2_1_2 fl"><img src="__STATIC__/images/male.png" width="18" height="18"/></div>
</div>
<div class="b cle hid">Pekín</div>
Descripción del estilo:
.cle{claro:ambos;}
.hid{desbordamiento:oculto;}
.fl{ flotador:izquierda;}
.fr{ flotador:derecha;}
Esta es la forma de resolver la brecha div causada por clear:ambos en estos días.
¿Por qué utilizar clear:ambos en div? Principalmente porque el texto en div b no se puede alinear a la izquierda incluso si text-align:left; está configurado en CSS, por lo que en este caso se usa claro:both.
Algunas preguntas:
(1) ¿Por qué text-align:left; del texto chino en div no es válido?
(2) ¿Por qué el uso de clear:both puede resolver el problema cuando text-align:left no es válido?
(3) ¿Por qué el uso de clear:ambos crea brechas?
(4) ¿Por qué el uso de overflow:hidden; en el div del mismo nivel anterior resuelve el problema de la brecha a continuación?
Estudiemos los problemas anteriores en detalle cuando tengamos la oportunidad en el futuro.
Resumir:
Cuando un div usa clear:both para crear un espacio, debe agregar overflow:hidden al div hermano encima para eliminar el espacio.