HTML уроци: разстояние между CSS линии

Разстояние между редовете CSS е много необходима за дизайна на текста. Всеки експерт винаги ги използва, ако създаде красив уебсайт. Благодарение на тези атрибути, можете да извършвате всякакви операции с текст.

По правило повечето дизайнери не харесват стандартното оформление на текста в html. CSS разстояние между редовете ви позволява да персонализирате почти всичко, което можете да си представите. И ако отидете дълбоко, можете да направите това, за което никога не сте мислили.

Как да направите текстово разстояние в CSS

Важно е да разберете, че можете да зададете размера на линиите, отстъпките и т.н. за всички елементи, където има текст. Например всички тези атрибути са отлични за:

• параграф;
• списъци;
• ;
• маси;
• заглавия;
• и всичко останало, където публикувате текста.

Като се има предвид разстоянието CSS, първо трябва да се обърне внимание на следните атрибути.

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

В CSS, размерът на линията се задава от параметъра line-height и font-size. Както можете да видите, на снимката ясно се посочва, че размерът на шрифта е размерът на шрифта. Нито едно писмо не излиза извън тези граници.

Височината на линията е разстоянието от средата на горния лидер до средата на долния Водещ. Стрелките всичко това е показано на фигурата.

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

Някои хора си мислят защо размерът на шрифта се простира по-ниско от линията с буквите. Това е просто. Все пак има букви, които са по-ниски от основното ниво на линията. Фигурата по-долу е ясен пример за това къде се използват символите, опънати нагоре и надолу.

Както можете да видите, буквите просто заемат целия диапазон на размера на шрифта. И височината на линията е по-голяма и на двете страни е добавено равно място.

Стойността на атрибута на височината на реда може да бъде всеки:

• пиксела;
• инча;
• предмети;
• интерес;
• и други, които се използват в CSS.

Не можете да посочите отрицателна стойност. Например, ако зададете коефициент, равен на една и половина, тогава ще получите стандартен интервал от един и половина в текста.

Ако посочите в проценти, имайте предвид, че 100% височина на линията е еквивалентна на стойността на размера на шрифта.

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

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

По-подробен проект

Разстоянието между CSS линиите всъщност не се ограничава до горните атрибути. Разстоянието все още се регулира с атрибутите margin и padding. Ако зададете атрибута точно като margin = '5px', то от всички страни на линията (параграф) ще бъде добавено разстояние от 5 пиксела.

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

Имайте предвид, че има и атрибут на подложка. Той работи точно като маржа. Можете да зададете както общия отстъп, така и конкретната посока (ляво, дясно, нагоре, отдолу).

Погледнете отблизо чертежа по-горе. Margin - отстъп от външната страна на обекта, и запълване - вътре.

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

Запомни това веднъж завинаги. Това е много важен момент при проектирането на обекти. Например, благодарение на полето, можете да зададете отстъпи между текста и снимките в него. Ако тези тирета не са налице, текстът ще бъде поставен близо до изображението.

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

Понякога това е много необходим имот. Фигурата по-долу показва пример за различна ширина на текста.

Пример за дизайн

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

Опитайте се да сравните двата параграфа, показани на фигурата по-долу. Кой текст предпочитате да четете?

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

За по-голяма яснота можете да проверите във всеки редактор. Сравнете няколко шрифта.

Моля, обърнете внимание, че всички шрифтове са написани на 24 пиксела. Както виждате, всички те се различават по височина и ширина на буквите. Ако сравните повече размерите, разликата ще бъде по-очевидна.

CSS: интервал между редовете в списъка

В списъците се прилага корекция на интервалите. В допълнение, в стиловете на списъците, описаният по-горе марж и подложка са характерни. Благодарение на това списъците стават по-красиви от стандартните. Използвайки всички тези атрибути, можете да зададете:

• Височината на елементите от списъка.
• Отстъп за текста вляво.
• Отстъп за линии над и под.
• Максималната ширина на всеки елемент.

заключение

Притежавайки такъв набор от атрибути, можете да играете с дизайна не само на линиите, но и на всичко, което искате. Това са глобални параметри, на които абсолютно всички елементи подлежат (изключението е размерът на шрифта, тъй като е само за текст).