A ver, las dos cosas son
completamente diferentes. Veo que entendés bien la diferencia:
Cita: text-indent: Aplica sangría a la primera línea de texto del elemento.
display:none: Oculta todo el elemento, quitándolo del flujo del DOM.
¿Cuáles son las aplicaciones más comunes?
text-indent
El uso más común es justamente para aplicar sangrías en párrafos :P
Pero en tu caso, sirve para ocultar el texto aplicando una sangría negativa muy grande.
Supongamos este HTML para un menu:
Pero ahora yo quiero que cada botón del menú sea de 50px de ancho por 50px de alto y que además tenga una imagen de fondo, pero ocultando el texto del link pues quiero la imagen:
Código CSS:
Ver originalul li a{
display:block;
width:50px;
height:50px;
text-indent:-9999px;
}
Lo que sucedería acá es que los elementos no tienen el texto visible, pero
ocupan las dimensiones que le he dado. Solamente ocultamos el texto! Si hubiésemos usado
display:none, todo el elemento se habría ocultado y no veríamos ni la imagen de fondo ni el espacio que ocuparían si estuvieran allí.
La importancia de este método radica en que el HTML es muy semántico! O sea, legible y comprensible por buscadores y otros dispositivos. Es importante que el texto del botón esté ahí pues así estos dispositivos y buscadores pueden leerlo, ya que no podrían leer el texto en una imagen.
display:none
Sirve para
ocultar un elemento y todo lo que contiene adentro. Esto no implica solamente hacerlo invisible, sino que además se quita el espacio que ocuparía del DOM.
Por ejemplo, si tengo un párrafo con una imagen en el medio, el texto estaría por arriba y por debajo de la imagen pues la imagen ocupa un espacio. Si usara
visibility:hidden sobre la imagen, esta se haría invisible. PERO el espacio que ocupa sigue ahí! Se vería como un espacio blanco donde estaría la imagen. display:none la quita completamente.