Шпаргалка: як зрабіць водступ тэксту CSS

Вэб-рэсурс ацэньваецца карыстальнікамі па яго знешняй прывабнасці. Таму нават інфармацыйна карысны тэкст можа быць не прачытаны з-за таго, што ён няякасна аформлены. Выснова - трэба старанна і ўважліва падыходзіць не толькі да сэнсаваму зместу старонак сайта, але і да яго візуальным прадстаўленні. З'яўленне тэхналогіі CSS пашырыла магчымасці стварэння прывабных артыкулаў. Адно з уласцівасцяў, прызначаных для палягчэння ўспрымання напісанага - водступ тэксту CSS.

Поля і водступы: у чым розніца?

Перш чым пачынаць фарматаваць тэкст, варта разабрацца, што такое поля і водступы. Нягледзячы на тое што гэтыя элементы разметкі ў шэрагу выпадкаў выглядаюць для карыстальніка аднолькава, паміж імі існуюць прынцыповыя адрозненні:

• поле задаецца уласцівасцю padding, водступ - margin;
• поле вызначаецца прамежкам паміж змесцівам і мяжой блока, водступ - паміж межамі суседніх блокаў;
• палі могуць як ўлічвацца ў памерах элемента (шырыні і вышыні), так і няма.

ўласцівасць margin

Такім чынам, каб задаць гарызантальны або вертыкальны водступ тэксту CSS, выкарыстоўваюць канструкцыю margin. Дадзеная ўласцівасць прымяняецца да тэгу

задавалага абзац дакумента. У самым простым выпадку яно запісваецца як:

margin: 12px.

Такі радок азначае, што вакол блока тэксту (або любога іншага блока) з усіх бакоў будзе зроблены водступ ў 12 пікселяў. Каб павялічыць прамежак, напрыклад, у тры разы, дастаткова запісаць:

margin: 36px.

Але што рабіць, калі інтэрвал паміж блокамі павінен быць розны з кожнага боку? Распрацоўнікі вэб-старонак выкарыстоўваюць некалькі формаў запісу:

1. margin: 11px 22px.
2. margin: 11px 22px 33px.
3. margin: 11px 22px 33px 44px.

У першым прыкладзе ад ніжняй і верхняй межаў блока будуць зробленыя водступы па 11 пікселяў, па баках блока - па 22 пікселя. Паводле другой форме запісы, паміж верхнім краем блока і кантэнтам будзе 11 пікселяў, паміж ніжнім - 33 пікселя, па баках - па 22 пікселя. У трэцім выпадку водступ тэксту CSS будзе мець значэнне 11 пікселяў зверху, 22 пікселя справа, 33 пікселя знізу і 44 пікселя злева.

Таксама даступная магчымасць запісу адлегласці да мяжы блока толькі з аднаго боку: margin-top, margin-bottom, margin-left, margin-right. Перавядучы назвы уласцівасцяў на рускую мову, нескладана здагадацца аб іх прызначэнні. Напрыклад, наступны запіс кажа пра тое, што водступ справа будзе роўны 22 пікселя:

margin-right: 22рх.

Для астатніх бакоў адлегласці вакол блока прымаюцца роўнымі значэнні элемента-бацькі.

Ўласцівасць margin мае асаблівасць, якую павінен памятаць распрацоўшчык, калі выкарыстоўвае водступ тэксту CSS па вертыкалі. Інтэрвалы суседніх элементаў не сумуюцца, а накладаюцца адзін на аднаго. Напрыклад, няхай адзін з блокаў мае margin-bottom: 15px, а які прымыкае да яго знізу блок margin-top: 35px. Школьная арыфметыка і здаровы сэнс падказваюць, што агульны водступ паміж імі будзе 50 пікселяў. На практыцы гэта не так. Блок з вялікім значэннем ўласцівасці margin «паглыне» свайго суседа. У выніку інтэрвал паміж элементамі будзе 35 пікселяў.

«Чырвоная» радок

Афармляючы дакумент у тэкставым рэдактары, карыстальнікі аддаюць перавагу задаваць кожны новы абзац з дапамогай «чырвонай» радка. З дапамогай CSS водступ тэксту злева нескладана зрабіць - выкарыстоўваецца канструкцыя text-indent. Запісваецца яна так:

text-indent: 11px.

Гэта значыць першая радок абзаца будзе ссунутая адноснага левага краю на 11 пікселяў. Каб тэкст на вэб-старонцы больш быў падобны на дакумент у рэдактары, варта дадаткова ўсталяваць выраўноўванне па шырыні, то ёсць запісаць:

text-indent: 11px;

text-align: justify.

Акрамя пікселяў, пры апісанні разметкі дапускаецца выкарыстанне іншых адзінак - цаляў, пунктаў, адсоткаў. Хай блок мае водступ тэксту CSS, роўны 10%. Пры шырыні блока, роўнай 500 пікселям, чырвоная радок будзе складаць 50 пікселяў (10% ад 500).

Для дадзенага ўласцівасці можа быць выстаўлена значэнне inherit. Такі запіс кажа, што блок выкарыстоўвае аналагічнае ўласцівасць бацькоўскага блока.

text-indent: inherit.

Дзіўна, але Абзацны водступ можа прымаць і адмоўныя значэння! У гэтым выпадку фармуюцца так званыя выступы, то ёсць асноўны тэкст застаецца на месцы, а першы радок ссоўваецца налева на 22 пікселя:

text-indent: -22px.

Каб літары ня перайшлі за левую мяжу браўзэра, дадаткова да text-indent трэба выкарыстоўваць канструкцыю для задання поля:

padding-left: 22px.

карысныя рэкамендацыі

Асноўныя ўласцівасці CSS для фарматавання тэксту разгледжаны. А замацаваць іх дапаможа практыка. Вось некалькі заключных саветаў, як прымяняць вывучаны матэрыял пры распрацоўцы вэб-сайтаў:

• чырвоная радок і водступ тэксту - розныя паняцці, і для іх ўказанні выкарыстоўваюцца розныя ўласцівасці;
• для вертыкальных водступаў правілы матэматыкі не дзейнічаюць - інтэрвалы накладваюцца, «перамагае» элемент з вялікім значэннем;
• адмоўны Абзацны водступ выкарыстоўваюць, каб паказаць першы радок абзаца з дапамогай малюнка.