Настройки в 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 {line-height: 12px; }

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

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

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

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

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

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

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

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