Как да зададете разстояние между CSS редовете
Не рядко, когато попълваме сайт, се сблъскваме с необходимостта да съобразим текстовото съдържание с размера на блока. И в ситуации, в които вече не е възможно да увеличим размера на шрифта, можем да опитаме да променим разстоянието между редовете в CSS.
Навигация по статии:
Освен това тази функция може да бъде много полезна при адаптиране на сайта за мобилни устройства. Тъй като не са необичайни случаите, когато при намаляване на ширината на екрана заглавията се пренареждат в няколко реда и думите сякаш се слепват една с друга. Можем лесно да разрешим този проблем, като зададем CSS разстоянието между редовете за заглавието.
Можем да променим разстоянието между CSS редовете, като използваме три свойства:line-height,margin иpadding. Нека разгледаме по-подробно всеки от тези методи.
Как да задам разстояние между CSS редовете с помощта на line-height?
И така, най-удобното свойство за задаване на разстоянието между редовете в CSS е свойствотоline-height, което задава разстоянието между редовете (като Microsoft Word) спрямо размера на шрифта.
Стойността на свойствотоline-height може да бъде зададена с помощта на:
- множител
- в пиксели (px)
- точки (pt)
- относителни единици (em)
- процент (%)
- инча (в) и т.н.
Освен това стойносттаline-height може да бъде наследена от родителския блок (inherit ) и изчислена автоматично (normal ).
Според мен най-удобната единица е множителят.
Ето добър пример за използване на CSS редово разстояние сline-height :
Когато ширината на екрана беше намалена, думите на надписа на една от иконите бяха пренаредениедин под друг. И тъй като височината на реда не беше зададена, думите просто се залепиха.
Нека добавим свойствотоline-height към този хедър, равно на1 :
Ето резултата:
Както можете да видите, разстоянието между думите се е увеличило поради появата на отстъпи над и под думите.
Как да настроя CSS редово разстояние с поле и подложка?
Също така, в допълнение къмline-height, можете да използвате свойстватаmargin иpadding, за да коригирате отстъпа, променяйки на свой ред външното и вътрешното разстояние на абзац или заглавие.
Ето един добър пример:
За тази част от текста задайте долнотополе на 15px:
Ето какво получаваме:
Както можете да видите, разстоянието между редовете се е увеличило, но има някои изречения с по-малко разстояние между тях. Това се случи, защото тези два реда са в един и същи етикет
Ще получим абсолютно същия резултат, ако използваме свойствотоpadding-bottom.
В резултат на това, след преглед на горните примери, можем да заключим, че ако спретнатостта и симетрията на текста са важни за вас, тогава най-подходящият инструмент за настройка на разстоянието между CSS редовете е свойствотоline-height.
Можете също да използвате разстоянието между редовете, като използвате свойствата на CSSmargin-bottom иpadding-bottom, но този метод е по-подходящ за задаване на разстоянието между параграфи, връзки или елементи от списък.