css - tricks - Es un elemento de lista con viñetas siempre sangrado exactamente 1.8em?

font smoothing css tricks

Question

Hice un menú desplegable de solo CSS. El requisito era tener una barra horizontal de elementos que cada uno pueda desplegar en un menú vertical. Además, esos artículos no deberían arrojar un menú terciario, sino simplemente mostrar listas con viñetas. Mi html tiene tres n anidados y el menú funciona perfectamente en todos los navegadores modernos. Se parece a esto:

Sin embargo, no me gustó cómo la caja más oscura detrás del enlace está comenzando desde la viñeta y no se extiende por todo el ancho del menú, así que jugué un poco y finalmente llegué a este cambio:

#nav li ul li ul li a {
    padding-left:1.8em;
    margin-left:-1.8em;
}

Ahora el elemento del menú con viñetas se ve como yo quería:

Y debido a la naturaleza del em bee relativo al tamaño de la fuente, funciona independientemente del tamaño de la fuente, como se muestra aquí con un tamaño de letra más grande:

Probé esto en Internet Explorer 8 + 9 + 10 (vista previa de desarrollador), Firefox 3 + 7, Chrome, Opera y Safari, y funciona como un encanto.

Sin embargo, simplemente no entiendo por qué es exactamente 1.8em que hace el trabajo. ¿Cómo es que cada navegador inserta los elementos de la viñeta exactamente hasta aquí? Busqué en Internet sobre este tema, pero no encontré nada útil. ¿Puedo estar seguro de que esto funciona en futuros navegadores? ¿Están esos 1.8em especificados en el estándar HTML?

Gracias de antemano por cualquier pista!

Editar:

A la respuesta de DisgruntledGoat : no funcionaría si utilicé 1em / -1em o 20px / -20px. Con este estilo:

#nav li ul li ul li a {
    padding-left:20px;
    margin-left:-20px;
}

Obtengo este resultado (obviamente no se escala con el tamaño de fuente) para diferentes tamaños de fuente:

Del mismo modo, 1em / -1em también está apagado y se ve a la derecha en la imagen de arriba, pero se escala con el tamaño de la fuente. Todavía parece que 1.8em es la distancia mágica por alguna razón ...

Answer 1

Definitivamente debe hacer un restablecimiento de CSS y luego establecer las propiedades de la manera que las necesita. Nunca confíes en que los navegadores sean consistentes. Agrega un poco de codificación pero, al mismo tiempo, prueba su código en el futuro.

Answer 2

Dado su código, ha configurado su ul tal manera que no tiene margen o relleno. Sin embargo, ha configurado sus li de tal manera que tienen margin-left: 1.8em :

#nav li ul li ul li {
    display: list-item;
    margin-left:1.8em;
    list-style:disc outside none;
}

#nav li ul li ul li {
    margin-left: 1.8em;
    padding-left: 0;
}

Y ahí está.

Answer 3

Para responder la pregunta y su comentario: su solución funciona porque niega el relleno con el mismo margen de tamaño exacto. Pero el espacio a la izquierda de la lista es más grande con el tamaño de letra más grande. Obtendrás el mismo resultado con el relleno de 1em y el margen -1em o 20px y -20px.

Como mencioné en el comentario, el relleno predeterminado real para las listas es 40px. Para hacer las cosas aún más confusas, al revisar las hojas de estilo del agente de usuario (en la herramienta de desarrollo de Chrome y Firebug para Firefox) informan las propiedades únicas de CSS: -webkit-padding-start o -moz-padding-start respectivamente.

Supongo que estas propiedades especiales se usan en lugar del relleno normal debido a que las listas son un caso especial en HTML: tienen viñetas / números colgantes que no cuentan en el relleno.

Answer 4

Basado en muchos años de navegadores inconsistentes, diría que no puedes confiar en que sean consistentes. La mejor opción es controlarla por la fuerza usted mismo.

Puede usar eso al configurar simultáneamente el relleno-izquierda y el margen-izquierdo de un li . p.ej:

li {
  margin-left: 1.8em;
  padding-left: 0;      
}

Aparentemente, algunos navegadores (principalmente más antiguos) usan relleno y cierto margen, así que asegúrese de establecer ambos.