Usando a CSS Line-Height Property para obter o espazo de liña CSS
Aprende a usar a altura da liña de propiedade estilo CSS para afectar o espazo entre as túas páxinas web.
Valores do espazo de liña CSS
O espazo de liña CSS é afectado pola altura da liña de propiedade do estilo CSS. Esta propiedade ten ata 5 valores diferentes:
- normal: o navegador determina un valor para o espazamento das liñas que está relacionado co tamaño da fonte. Normalmente é o mesmo que o tamaño da fonte ou un pouco maior (como o 20%).
- herdar: o espazamento das liñas debe tomarse do espazamento das liñas do elemento primario. Entón, se establece a altura da liña da etiqueta do seu corpo nun 30% maior que o tamaño da fonte e as etiquetas de parágrafo dentro do que se establecen como herdadas, tamén terán unha altura de liña do 30% maior que o tamaño da fonte.
- un número: se o valor da altura da liña non ten unha unidade de medida, considérase un multiplicador no tamaño da fonte para o alto da liña. Así, unha altura de liña de 1,25 sería un 25% maior que o tamaño da fonte.
- unha lonxitude: se o valor de altura da liña ten unha unidade de medida, esa é a cantidade exacta de espazo que debe haber entre as liñas. Así, 1.25mm resultaría en liñas de 1,25 milímetros de distancia.
- unha porcentaxe: se a altura da liña é unha porcentaxe, esa sería unha porcentaxe do tamaño da fonte. Así, unha liña de altura do 125% sería un 25% maior que o tamaño da fonte.
Cal é o valor que debe usar para o espazamento de liña CSS
Na maioría dos casos, a mellor opción para o espazamento entre liñas é deixar o predeterminado - ou "normal". Este é xeralmente o máis lexible e non require que fagas nada especial. Pero cambiar o espazamento entre liñas pode darlle unha sensación diferente ao seu texto.
Se o tamaño da fonte está definido como ems ou porcentaxes, a altura da liña tamén debería definirse así. Esta é a forma máis flexible de espazamento entre liñas porque permite ao lector redimensionar as súas fontes e mantén a mesma proporción no seu espazamento entre liñas.
Estabelecer o alto da liña para as follas de estilo de impresión cun valor de punto (pt). O punto é unha medida de impresión, e así tamén os seus tamaños de fonte deben estar en puntos.
Non me gusta usar a opción de número porque descubrín que é máis confuso para as persoas. Moita xente pensa que o número é un tamaño absoluto, polo que o fan enormes. Por exemplo, pode ter unha fonte establecida en 14 píxeles e configure o seu alto da liña en 14 - o que resulta en grandes diferenzas entre as liñas - porque o espazamento das liñas está fixado en 14 veces o tamaño da fonte.
Cantidade de espazo debería usar para o seu espazamento de liña
Como mencionei anteriormente, recoméndoche usar o espazamento das liñas por defecto a menos que teña un motivo específico para cambialo. Cambiar o espazamento das liñas pode ter efectos diferentes:
- O texto moi axustado pode ser difícil de ler. Pero os pequenos espazos de liña poden afectar o humor do texto. Se o texto está arrastrado xuntos, pode facer que o sentido do texto sexa máis escuro ou máis tenso.
- O texto máis afastado tamén pode ser difícil de ler. Pero os espazos de liña ancha fan que o texto pareza máis fluído e fluído.
- Cambiar o espazamento das liñas pode facer que o texto que doutro xeito non cabería nun espazo sexa máis compacto ou ocupará máis espazo nos teus deseños.