En el proceso de desarrollo habitual, a menudo necesitamos usar múltiples imágenes.
<! Border-Bottom: 1px Red;} ul {Border: 1px de color azul; Img src = lipeng.png> </li> </ul> </body> </html>Pero en este momento encontramos un problema, ¿por qué hay una línea adicional debajo de mi imagen?
¿Qué está pasando?
¿No tenía claro el borde exterior e interno entre IMG?
De hecho, esto es en realidad un fantasma que en línea elementos.
Cualquier elemento visible que no sea un elemento de nivel de bloque es un elemento asociado interno, y la característica de su rendimiento es la forma de diseño de línea. ---- "Guía autorizada de CSS"¿Cuál es el significado?
Esto significa que, de hecho, como el texto de la imagen y otros elementos de la asociación interna, está alineado con su línea de base principal, pero está alineado con la línea de base.
Como sabemos la razón de este problema, es mucho más simple resolverlo.
1. La primera soluciónDado que es el elemento en línea, este problema puede resolver naturalmente este problema de manera simple y grosera, es decir, cambiar nuestro elemento a personalidad personalizada, ¿se puede cambiar de línea a línea?
<Tipo de estilo = Text/CSS> IMG {Altura: 200px; : 0; 2. La segunda soluciónEsto es demasiado duro, el género ha cambiado, ¿cómo podemos volver felizmente, por lo que tenemos que probar la curva para guardarlo?
<Tipo de estilo = Text/CSS> IMG {Altura: 200px; ;Se puede ver que esto también puede lograr los resultados deseados.
La razón es que el atributo predeterminado de vertical alineado es la línea de base.
3. La tercera soluciónPero el método de alineación se modifica, por lo que también puede causar problemas. Ahora que ya no está en la documentación actual, naturalmente no se alineará con referencia a este texto cuando se presente.
Podemos usar flotando.
<Estilo de estilo = text/css> img {altura: 200px; Azul;Esto también puede resolver este problema, pero tenga en cuenta que aunque la flotación es buena, no seas codicioso.
Debe poder resolver correctamente el impacto de la flotación, y si originalmente planeó hacer el efecto del envío de texto, entonces usar flotación debe ser su mejor opción.
4. La cuarta soluciónSi todos los esquemas anteriores no pueden resolver sus problemas, entonces solo se sacrifica mi gran muerte.
Puede darle a su elemento principal para establecer el tamaño del texto en 0.
<Type de estilo = text/css> img {altura: 200px; ;Dado que está alineado de acuerdo con la línea de base del texto, estableceré el texto directamente, para que no pueda colocarlo, pero este enfoque solo se recomienda cuando use su uso.
ResumirBueno, lo anterior son las cuatro soluciones para este problema. Si tiene alguna pregunta, puede dejar un mensaje para comunicarse.