Quando você usa blocos div HTML e o meio dos blocos não pode ser firmemente conectado, nada pode ser feito.
1. Você pode adicionar um no conteúdo intermediário de <head></head>
* {
margem:0;
preenchimento:0;
}
Tornar zero o espaçamento entre todos os blocos não entra em conflito com a margem de preenchimento abaixo.
2. Há um problema de lacuna entre os divs superiores e inferiores
Escrevi 4 divs, distribuídas para cima e para baixo, com espaçamento entre elas. O código e o efeito são os seguintes:
.div1{
altura:100px;
cor de fundo:azul;
posição:relativo;
}
.div2 {
altura:100px;
cor de fundo:azulvioleta;
posição:relativo;
}
.div3{
altura:100px;
cor de fundo:vermelho;
posição:relativo;
}
.div4{
altura:100px;
cor de fundo: amarelo;
posição:relativo;
}
<corpo>
<div class="div1" </div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
Então tentei adicionar margin:0 a cada div para remover o espaçamento entre divs.
.div1{
altura:100px;
cor de fundo:azul;
posição:relativo;
margem: 0;
}
.div2 {
altura:100px;
cor de fundo:azulvioleta;
posição:relativo;
margem: 0;
}
.div3{
altura:100px;
cor de fundo:vermelho;
posição:relativo;
margem: 0;
}
.div4{
altura:100px;
cor de fundo: amarelo;
posição:relativo;
margem: 0;
}
O resultado permanece inalterado, mas ainda existem lacunas, conforme mostrado abaixo:
Em seguida, pesquisei no Baidu e encontrei uma maneira de definir o tamanho da fonte com o seguinte código e efeito:
corpo{tamanho da fonte:0;}
.div1{
altura:100px;
cor de fundo:azul;
posição:relativo;
}
.div2 {
altura:100px;
cor de fundo:azulvioleta;
posição:relativo;
}
.div3{
altura:100px;
cor de fundo:vermelho;
posição:relativo;
}
.div4{
altura:100px;
cor de fundo: amarelo;
posição:relativo;
}
O código acima se concentra na adição de body{font-size:0;}, e o efeito é o seguinte:
Você pode ver que a lacuna entre a parte superior e inferior do div foi eliminada. No entanto, ainda há uma lacuna entre a parte superior e a esquerda.
Foi isso que fiz, adicionando body{margin:0px;}, o código ficou o seguinte:
corpo{margem:0px;}
corpo{tamanho da fonte:0;}
.div1{
altura:100px;
cor de fundo:azul;
posição:relativo;
}
.div2 {
altura:100px;
cor de fundo:azulvioleta;
posição:relativo;
}
.div3{
altura:100px;
cor de fundo:vermelho;
posição:relativo;
}
.div4{
altura:100px;
cor de fundo: amarelo;
posição:relativo;
}
O efeito é o seguinte:
Como você pode ver, todas as lacunas foram eliminadas.
No entanto, ainda há um problema, ou seja, definir font-size:0 fará com que todas as fontes desapareçam.
Foi assim que resolvi esse problema: adicionei uma div dentro de uma div e redefina o tamanho da fonte da div interna, por exemplo: font-size:30px;.
Solução perfeita!
3. DIV + CSS claro: ambos eliminam o problema de criar uma lacuna acima do div após flutuar.
Sabemos que às vezes o uso de css float produzirá css float. Neste momento, precisamos limpar o float. Podemos usar o atributo de estilo clear para conseguir isso.
No entanto, depois de usar clear:both para limpar os floats, um espaço branco geralmente aparece acima do div onde clear:both é aplicado.
A solução é adicionar overflow:hidden ao div acima deste div.
<div class="a escondido">
<div class="bms_2_1_1 fl">~Atravessando o oceano para ver você,</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">Pequim</div>
Descrição do estilo:
.cle{claro:ambos;}
.hid{estouro:oculto;}
.fl{ float:esquerda;}
.fr{ float:certo;}
Esta é a maneira de resolver a lacuna div causada por clear:both hoje em dia.
Por que usar clear:both em div? Principalmente porque o texto em div b não pode ser alinhado à esquerda, mesmo se text-align:left estiver definido em CSS, então clear:both é usado neste caso.
Algumas perguntas:
(1) Por que text-align:left do texto chinês em div é inválido?
(2) Por que usar clear:both pode resolver o problema quando text-align:left é inválido?
(3) Por que usar clear:both cria lacunas?
(4) Por que usar overflow:hidden na div de mesmo nível acima resolve o problema de lacuna abaixo?
Vamos estudar as questões acima em detalhes quando tivermos oportunidade no futuro.
Resumir:
Quando um div usa clear:both para criar uma lacuna, você precisa adicionar overflow:hidden ao div irmão acima dele para eliminar a lacuna.