No processo de desenvolvimento usual, geralmente precisamos usar várias imagens.
<! Border-Bottom: 1px Solid Red;} UL {Border: 1px Blue sólido; Img src = lipeng.png> </li> </ul> </body> </html>Mas neste momento encontramos um problema, por que existe uma linha extra sob minha foto?
O que está acontecendo?
Eu não limpei a borda externa e interna entre o IMG?
De fato, este é realmente um fantasma que os elementos embutidos.
Qualquer elemento visível que não seja um elemento de nível de bloco é um elemento associado interno, e a característica de seu desempenho é a forma de layout da linha. ---- "Guia de autoridade do CSS"Qual é o significado?
Isso significa que, de fato, como texto de imagem e outros elementos de associação interna, está alinhado com a linha de base dos pais, mas você está alinhado com a linha de base.
Como sabemos o motivo desse problema, é muito mais simples resolvê -lo.
1. A primeira soluçãoComo é o elemento embutido, esse problema pode resolver naturalmente esse problema de maneira simples e rudemente, ou seja, para alterar nosso elemento para personalidade personalizada, ele pode ser alterado de embutido para bloqueio?
<Tipo de estilo = Texto/CSS> IMG {Hight: 200px; : 0; margem: 0;} </style> 2. A segunda soluçãoIsso é muito difícil, o gênero é alterado, como podemos reproduzir, então temos que experimentar a curva para salvá -lo.
<Tipo de estilo = Texto/CSS> IMG {Hight: 200px; Potding: 0;Pode -se observar que isso também pode alcançar os resultados desejados.
O motivo é que o atributo padrão do alinhamento vertical é a linha de base.
3. A terceira soluçãoMas o método de alinhamento é modificado, por isso também pode causar problemas. Agora que você não está mais na documentação atual, naturalmente não estará alinhado com referência a este texto quando estiver definido.
Podemos usar flutuação.
<Tipo de estilo = Texto/CSS> IMG {Hight: 200px; Blue;Isso também pode resolver esse problema, mas observe que, embora o flutuante seja bom, não seja ganancioso.
Você deve ser capaz de resolver corretamente o impacto da flutuação e, se você planejava originalmente fazer o efeito do texto em torno do texto, o uso de flutuação deve ser sua melhor escolha.
4. A quarta soluçãoSe todos os esquemas acima não puderem resolver seus problemas, apenas minha grande morte será sacrificada.
Você pode dar ao seu elemento pai para definir o tamanho do texto como 0.
<Tipo de estilo = texto/css> img {altura: 200px; Lista -Stedyle: Nenhum;Como você está alinhado de acordo com a linha de base do texto, definirei o texto diretamente, para que você não possa posicioná -lo, mas essa abordagem é recomendada apenas quando você estiver com pressa.
ResumirBem, o exposto acima são as quatro soluções para esse problema. Se você tiver alguma dúvida, pode deixar uma mensagem para se comunicar.