CSS интервал между редовете: решения
Много често начинаещите дизайнери имат проблеми при овладяването на каскадни стилови листове (CSS). Не се прави изключение разстояние между редовете в CSS. Разстоянието между редовете е разстоянието между линиите вертикално. Както и в обикновен документ на Microsoft Word, този параметър може да бъде променен и в текста на html файла.
Използвайте височината на линията при промяна на разстоянието
Първото и най-правилното решение на проблема с интервали би било да се зададе стойността за свойството line-height. По подразбиране стойността на това свойство е нормална (line-height: normal;). Разстоянието между редовете се изчислява автоматично от самия интернет браузър и зависи по-специално от вида на шрифта, както и от неговия размер. Всяко положително числово число, което ще бъде зададено в свойството на стила на височината на линията, ще бъде възприето от браузъра като число, с което размерът на текущия шрифт трябва да се умножи.
В CSS интервалът между редовете може да бъде определен в различни единици за дължина: точки (pt), инчове (инча), пиксели (px) и проценти (%). Процентът се изчислява спрямо текущия шрифт и по подразбиране стойността му е 100%. Не забравяйте, че свойството line-height заема стойността на наследеното свойство от неговия родителски елемент.
Ето някои примери за това как да увеличите разстоянието между редовете в CSS:
,
Процесът на работа с разстояние между редовете е доста прост. Трябва да имате основни познания за CSS и възможността да свържете файла към главната html страница. Стиловете могат да се задават и директно на html страницата:
За да направите половин интервал в това изречение, трябва да добавите следния код в CSS файла:
p.stroka {
височина на линията: 1.5;
}
За да направите двоен интервал, можете да напишете следния код:
p.stroka {
линия-височина: 2;
}
или
p.stroka {
височина на линията: 200%;
}
И в двата случая браузърът ще разбере, че трябва да умножите текущия шрифт с 2. Тази стойност ще бъде разстоянието между редовете.
Сега ще ви дадем пример как да намалите разстоянието между редовете (CSS):
Важно е да запомните, че отрицателната стойност на височината на линията просто не се възприема, така че минималната й стойност може да бъде 0. За да получите половин интервал, трябва да напишете следния код:
p.line {
линия-височина: 0.5;
}
или
p.line {
линия-височина: 50%;
}
или
p.line {
линия-височина: 2;
}
или
p.line {
line-height: 0.5pt;
}
Всичките три опции са правилни и съответстват на всички стандарти на W3C, съответно, ще работят във всяка версия на браузъра.
Използвайте подложка при промяна на разстоянието
Въпреки това, освен че променяте свойството line-height, има и друг начин за промяна на разстоянието между редовете в CSS, той ще бъде "игра" със стойностите на свойството padding. Свойството style на padding е отговорен за отстъпването във всеки html обект. По подразбиране това свойство е 0. Чрез избиране на различни стойности можете да промените разстоянието между редовете, например:
,
Работата с разстояние между редовете е лесна. Достатъчно е да знаете основите на CSS и да можете да свържете файла към основната html страница. Можете също да го зададете директно на страницата с html разширение.
За да увеличите разстоянието между редовете, увеличете стойността на собствеността:
p.second {
пълнеж: 10px;
}
Така разстоянието между редовете в нашия абзац ще бъде увеличено с 10 пиксела спрямо първоначалното. С един и същ успех е възможно да се намали разстоянието между редовете, предписвайки например:
p.second {
пълнеж: 0px;
}
Отрицателно разстояние между редовете
Ако забележите, също не е позволено да въвеждате отрицателни стойности, така че низовете да не се припокриват. В CSS интервалът между редовете не може да бъде отрицателен. По отношение на спазването на правилата за писане на код и W3C стандарти, никога няма да можете да записвате отрицателни стойности в стойностите на междуредовото разстояние.
Промяна на разстоянието между редовете в списъците
Понякога има задача да промените междуредията в списъците.
- и
- , Предишните методи няма да доведат до желания резултат, но има едно свойство, което може да промени интервала в списъка - това свойство е полето. Това свойство на стила може да бъде положително или отрицателно. Нека покажем промяната в разстоянието между редовете в списъка по пример:
За да увеличите отстъпа, трябва да напишете следните редове в CSS файла:
ul li {
margin-top: 10px;
}
Така посочихме, че разстоянието от всеки елемент от списъка се увеличава с 10 пиксела. И в този случай е възможно и отрицателна стойност. Така можем да зададем: - margin-top: -15px.