Настройки в CSS: разстояние между линиите

В CSS разстоянието между линиите е много лесно да се зададе. Има специална собственост за това. Но, разбира се, има много други параметри, които са универсални и могат да бъдат приложени към текста.

Ако не са направени никакви настройки, стойностите по подразбиране са зададени. Ако искате, можете да промените това разстояние. Стойността може да бъде в проценти или в пиксели.

Височина на реда

В CSS разстоянието между линиите може да бъде демонстрирано чрез следната фигура.

Горното изображение показва параметрите със съответните разстояния. Текстът се намира в пространството с размер на шрифта. Имайте предвид, че линията на текста не започва на земята, но е малко по-висока. Полето отдолу е предвидено за букви, които имат елементи отдолу (g, y и т.н.).

Обърнете внимание, че интервалът между блоковете с размер на шрифта се нарича водещ. В HTML и CSS тази характеристика не се показва по никакъв начин, но е в други графични и текстови редактори. Например в Adobe Photoshop.

Фигурата по-горе показва къде в Photoshop можете да определите водещата. Номер показва параметъра за размер на шрифта.

Примери за използване на височина на линията

В CSS разстоянието между линиите може да бъде зададено в проценти. Илюстративен пример е даден по-долу.

В случай на малка стойност, потребителят на вашия сайт ще бъде неудобен за четене.

Разстоянието може да се промени и размерът на шрифта. Ако разликата между основните параметри е много различна в цифрите, тогава тази разлика се компенсира от увеличение на водещите.

Тънкостите на дизайна

В CSS разстоянието между линиите може допълнително да се коригира с различни тирета. Обърнете внимание на примера от фигурата.

В полето "Елемент" в нашия случай ще има текст. Подплата е вдлъбнатина вътре в обекта и маржът е вдлъбнатината на обекта. Границата е рамка. То може да бъде 0 пиксела и може би 100.

Следващото изображение показва всички тирета, рамката и височината на текстовата линия едновременно.

Ако имате малък текст, всички на един ред или всеки ред в отделен параграф, разстоянието може да се коригира чрез вмъкване между тези параграфи. Това означава, че мокетирането и подплата между линиите в един елемент нямат ефект. Те само подреждат краищата на обекта. Предметът е целият абзац, а не линията в него. Важно е да не се бъркате тук.

В случаите, когато има много линии и всичко това се намира в един обект, се препоръчва шрифтът да бъде променен с основните параметри.

Как да увеличите разстоянието между CSS линиите

Разстоянието между линиите на HTML може да бъде присвоено към клас или към всички параграфи в текста. Ако посочите това: p {line-height: 20px; }, тогава абсолютно всички параграфи на страницата ще бъдат с линии от 20 пиксела. Ако имате нужда от различни размери на различни места, препоръчително е да направите следното.

Предписвайте стиловете.

.class1 {line-height: 20px; }

.class2 {линия-височина: 16px; }

.class3 {линия-височина: 12px; }

За по-голяма яснота добавете рамка, за да видите, че тя работи. В бъдеще тя трябва да бъде премахната.

След това прилагайте тези класове. Резултатът е както следва.

Обърнете внимание, че в третия случай групата се вмъкна в текста. Всичко това поради факта, че размер на шрифта по-голяма от височината на линията. Следователно е важно да се гарантира, че няма такива противоречия. Ако направите малка височина на линията, намалете съответно шрифта.

Не се препоръчва да правите твърде малко текст и малко разстояние между линиите. Тъй като никой потребител не може да чете всичко това спокойно. Очите му бързо ще уморят. Търсачките също така казват, че текстът е лесен за ползване.

Освен това напоследък се набляга на удобството на мобилните потребители. Там препоръките винаги казват, че размерът на шрифта трябва да бъде нормален, а не малък. Това засяга особено силно връзките. С малкия си размер потребителят ще има затруднения при използването на навигацията на сайта.

Google търсачката има специален инструмент, който помага в този анализ. Това е много удобно за уеб администратори.

Ето един пример за резултатите, които могат да бъдат.

Препоръчва се да се използват съвети, тъй като тези критерии влияят върху резултата от търсенето.