Configuración en CSS: distancia entre liñas

En CSS, a distancia entre liñas é moi fácil de configurar. Hai unha propiedade especial para iso. Pero, por suposto, hai moitos outros parámetros que son universais e poden ser aplicados ao texto.

Se non fas nada, os valores predeterminados están axustados. Se o desexa, pode cambiar esta distancia. O valor pode ser en porcentaxe ou en píxeles.

Altura de fila

En CSS, a distancia entre as liñas pódese demostrar coa seguinte figura.

A imaxe de arriba mostra os parámetros coas distancias correspondentes. O texto está situado no espazo de tamaño de fonte. Teña en conta que a liña de texto non comeza na parte inferior, pero é lixeiramente superior. O espazo a continuación está previsto para as letras que teñan elementos de abaixo (g, y, etc.).

Teña en conta que o espazo entre bloques de tamaño de letra chámase líder. En HTML e CSS esta propiedade non aparece de ningún xeito, senón noutros editores gráficos e de texto. Por exemplo, en Adobe Photoshop.

A figura de arriba mostra onde en Photoshop pode especificar o líder. Un número indica o parámetro de tamaño de fonte.

Exemplos de uso da altura da liña

En CSS, a distancia entre as liñas pode ser establecida por porcentaxe. A continuación móstrase un exemplo ilustrativo.

No caso dun pequeno valor, o usuario do teu sitio non se sentirá cómodo para ler.

A distancia pode ser modificada e o tamaño da fonte. Se a diferenza entre os parámetros principais é moi diferente nas figuras, entón esta diferenza está compensada por un aumento no liderado.

Sutileza do deseño

En CSS, a distancia entre as liñas pode axustarse adicionalmente con varios sangrías. Consideremos un exemplo na figura.

No campo "Elemento", no noso caso haberá texto. O recheo é unha indentación dentro dun obxecto, ea marxe é unha indentación dun obxecto. O bordo é un cadro. Pode ser de 0 píxeles e quizais 100.

A seguinte imaxe amosa todas as sangrías, o cadro ea altura da liña de texto á vez.

Se tes un pequeno texto, todo nunha liña ou cada liña nun parágrafo separado, a distancia pode axustarse sangrando entre estes parágrafos. É dicir, o desprazamento e o acolchado entre liñas nun só elemento non teñen efecto. Só sangran os bordos do obxecto. Un obxecto é un parágrafo enteiro, e non unha liña nel. É importante non confundir aquí.

Nos casos nos que hai moitas liñas e todo isto está situado nun só obxecto, recoméndase que os parámetros principais cambien a fonte.

Como aumentar a distancia entre as liñas CSS

A distancia entre as liñas de HTML pode ser asignada a unha clase ou a todos os parágrafos do texto. Se especifica isto: p {line-height: 20px; }, Entón absolutamente todos os parágrafos na páxina terán liñas de 20 píxeles. Se precisas tamaños diferentes en diferentes lugares, recoméndase facer o seguinte.

Prescrición de estilos.

.class1 {line-height: 20px; }

.class2 {line-height: 16px; }

.class3 {line-height: 12px; }

Para obter máis claridade, engadiremos un cadro para que poida ver que funciona. No futuro, debe ser eliminado.

A continuación, aplique estas clases. O resultado é o seguinte.

Nótese que no terceiro caso, a banda tocou o texto. Todo porque o tamaño da fonte é maior que a altura da liña. Polo tanto, é importante asegurar que non exista tal contradición. Se fas unha altura de liña pequena, a continuación, reduza a fonte correspondente.

Non se recomenda facer demasiado pouco texto e unha pequena distancia entre as liñas. Xa que ningún usuario pode ler todo isto en silencio. Os seus ollos vanse cansando rapidamente. Os buscadores tamén din que o texto é fácil de usar.

Ademais, recentemente hai un gran énfase na conveniencia para os usuarios móbiles. Alí, as recomendacións sempre din que o tamaño da fonte debe ser normal, non pequeno. Isto afecta especialmente as ligazóns. Co seu pequeno tamaño, o usuario terá dificultade para usar a navegación do sitio.

O buscador "Google" ten unha ferramenta especial que axuda nesta análise. É moi conveniente para os webmasters.

Aquí tes un exemplo dos resultados que poden ser.

Recoméndase usar as suxestións, xa que estes criterios inflúen no resultado da busca.