2010-12-13 11 views
6

estaba navegando a través de esta página en meyerweb:¿Por qué controlar el relleno con altura de línea?

http://meyerweb.com/eric/css/edge/menus/demo.html

y me di cuenta de algo curioso acerca de la forma en que se crea el relleno en la cabecera:

h1 {margin: 0; padding: 1em 0.25em 0; font: bold 2.5em Arial, sans-serif; line-height: 0.8em; border-bottom: 1px solid silver; text-align: right; color: #557; letter-spacing: 2px;} 

Ahora bien, si se quita la línea- directiva de altura, agrega un poco de relleno a la parte superior. Por lo tanto, la altura de la línea funciona esencialmente para eliminar un poco de relleno de la parte superior de la h1. Mi pregunta es: ¿por qué no dejar fuera de línea la altura y cambiar el relleno de 1em a .9em?

Me doy cuenta de que hay muchas maneras de despellejar a un gato en CSS, pero pensé que si un experto como Meyer lo hace de esta manera, probablemente haya alguna razón para la elección.

Gracias, Jonás

Respuesta

6

La razón para usar una altura de línea inferior a 1em no está realmente relacionada con el espaciado en la parte superior, sino más bien con el espacio entre el borde inferior y el final de la línea. Tal vez un ejemplo podría ilustrar esto mejor: http://www.jsfiddle.net/yijiang/tptbe/

alt text

Como se puede ver, con el valor por defecto 1 em la línea se encuentra ligeramente por encima de la parte inferior de las letras 'P' y 'g', pero con el 0.8em las letras se levantan justo debajo de las letras 'a' y 'b', una posición que es más estética

+0

¡Gracias! Sabía que había una razón. – Jonah

0

Para hacer hueco entre el borde inferior de h1 a la línea se hacen más pequeños.

0

Como dijo Jeff, no es para eliminar el acolchado superior, sino para hacer que el texto se superponga ligeramente al borde inferior - cambiar el margen o relleno en cualquier dirección no causaría el mismo efecto.

Cuestiones relacionadas