Granična linija. CSS sintaksa širine obruba

Pogledali smo nekoliko lekcija ranije shematski prikaz blok web-stranice, a također je ukratko govorio o takvom CSS svojstvu kao border , s kojim možete postaviti granice za element. Ovaj put ćemo detaljnije pogledati ovo svojstvo na primjerima.

Granica se nalazi između margine i ispune. To znači da je marža iza granica. Obrub može biti postavljen na sve četiri strane (kao da zatvara blok u okvir), ili na jednu, dvije ili tri strane. CSS vam omogućuje kontrolu debljine, boje i stila obruba. Proučimo ovo detaljnije.

Border-width: širina ruba

Pomoću granična svojstva-width postavlja širinu obruba. Najčešće je ova veličina označena u pikselima. Možete postaviti iste ili različite širine za sve četiri granice, na primjer:

/* sve 4 granice su široke 2px: */ border-width: 2px; /* gornji i donji rubovi su široki 2px, lijevi i desni su 4px: */ border-width: 2px 4px; /* gornji rub - 2px, lijevi i desni - 6px, donji - 3px: */ border-width: 2px 6px 3px; /* gornji rub - 2px, desni - 3px, donji - 4px, lijevi - 5px: */ border-width: 2px 3px 4px 5px;

Osim toga, postoje ključne riječi za označavanje širine granice:

• tanki - obrub širine 2px;
• srednje - obrub širine 4 px;
• debljina - obrub širine 6px.

Border-color: boja obruba

Svojstvo border-color određuje boju obruba. Boje se mogu specificirati u bilo kojem CSS formatu: ključnim riječima, heksadecimalnom ili RGB - kako vam više odgovara. Po analogiji s prethodnim svojstvom, možete postaviti jednu boju za sve granice ili odabrati različite boje za svaku granicu.

Boja obruba: #FFFF00;

Također možete postaviti prozirna boja, pisanje:

Boja obruba: prozirna;

Border-style: stil obruba

Zahvaljujući svojstvu stila obruba, obični obrub možete pretvoriti u točkasti, dvostruki ili trodimenzionalni - ima ih mnogo različita značenja. Da biste to učinili, upotrijebite sljedeće ključne riječi:

• solid - čvrsta granica;
• točkasta - granica točkica;
• crtkano - točkasti obrub;
• dvostruko - dvostruki rub;
• utor - volumetrijska granica zareza;
• greben - voluminozna granica s debelim rubom (u suštini inverzija prethodnog stila);
• početak - ekstrudirani rub;
• umetnuti - uvučeni rub (u suštini inverzija prethodnog stila).

Kao i kod svojstava širine obruba i boje obruba, svaki obrub bloka može se drugačije stilizirati - na primjer, gornji i donji obrub možete učiniti isprekidanim, a desni i lijevi obrub dvostrukim. Ovdje sve ovisi samo o mašti.

Stil obruba: dvostruko točkasto;

Bilješka: V različitim preglednicima Izgled obruba može malo varirati.

Uobičajeni obrub svojstva CSS-a: 3 u 1

Da biste stilizirali obrub, ne morate redom koristiti sva tri gore navedena svojstva. Dovoljno je znati o generalu univerzalno vlasništvo border CSS, s kojim ćete puno brže napisati stil i uštedjeti prostor. U tu svrhu u bez posebnog reda zabilježite vrijednosti za sva tri svojstva:

Obrub: 2 px točkasti #FF0000;

Granice za pojedine stranke

Koristeći dodatna svojstva obruba u CSS-u, svaki obrub bloka možete pojedinačno stilizirati. Oni će vam pomoći u tome sljedeća svojstva:

• border-top - stil za gornji obrub;
• border-right - za desnu granicu;
• border-bottom - za donju granicu;
• border-left - za lijevu granicu.

border-top: 2px solid #0000FF; border-bottom: 7px dvostruko #000080;

Rezultati

Sada kada znate kako napraviti obrube za blokove, možete vježbati njihovu izradu. Postoji mnogo načina da se sažeto opiše stil bez previše redaka. CSS datoteka. Ovdje važnu ulogu igra poznavanje principa kaskadnih stilskih listova. Pogledajmo primjer.

Recimo da želite stvoriti obrub za div s tri puna siva obruba i isprekidanim zelenim donjim obrubom. Ovaj stil možete napisati ovako:

Div ( granica-desno: 8px dvostruko #FF0000; granica-lijevo: 8px dvostruko #FF0000; granica-dno: 8px dvostruko #FF0000; granica-gore: 4px točkasta #FDD201; )

Ali ovo je predug post. Sve ovo može se napisati ukratko:

Div (obrub: 8px dvostruko #FF0000; obrub-gornje: 4px točkasto #FDD201; )

Kao što je gore spomenuto, ovdje ćemo iskoristiti kaskadna svojstva CSS-a. Najprije napišemo stil za sve četiri strane okvira, a zatim specificiramo stil posebno za donji obrub, čime djelomično prepisujemo prethodni stil. Vrlo je važno slijediti ovaj redoslijed redaka.

Mini zadatak

Pokušajte stvoriti obrub za div s dimenzijama 200x200 piksela. Stilovi za okvir trebaju biti ovakvi:

• Neka gornja i donja granica budu čvrste čvrsta, dajte im istu boju po izboru i širinu od 5 piksela.
• Napravite lijevu granicu isprekidano, širine 3 piksela, odaberite boju različitu od prethodne.
• Učinite desni rub dvostrukim dvostruko, širine 7 piksela, različite boje od prethodna dva.

Na kraju bi vaš rad trebao izgledati ovako (osim boje koju odaberete):

Rezultat zadatka (pogled u Chromeu)

Svojstvo CSS border koristi se za stvaranje obruba objekta, odnosno debljine obruba, njegove boje i stila. Ovo se svojstvo široko koristi u HTML-u. Možete stvarati razne efekte za bolju percepciju sadržaja na stranici. Na primjer, dizajnirajte bočnu traku, zaglavlje web stranice, izbornik itd.

1. Sintaksa CSS obruba

granica: širina obruba stil obruba boja obruba | naslijediti;

• border-width - debljina granice. Možete ga postaviti u pikselima (px) ili koristiti standardne vrijednosti tanak, srednji, debeli (razlikuju se samo po širini u pikselima)
• border-style - stil prikazanog obruba. Može uzeti sljedeće vrijednosti
  • nijedan ili skriven - poništava obrub
  • točkasti – točkasti okvir
  • crtkana - okvir od crtica
  • puna - jednostavna linija (najčešće korištena)
  • dvostruko - dvostruki okvir
  • utor - užlijebljeni 3D rub
  • greben, umetak, ispad - različiti efekti 3D okvira
  • naslijediti - primjenjuje se vrijednost nadređenog elementa
• border-color - boja obruba. Može se postaviti pomoću konkretno ime bojama ili in RGB format(pogledajte nazive html boja za stranicu)

Bilješka

Vrijednosti u svojstvu CSS granice mogu se postaviti bilo kojim redoslijedom. Najčešće korišteni niz je "boja stila debljine".

2. Primjeri s različitim CSS obrubima

2.1. Primjer. Različiti stilovi dizajna rubova

border-style: dashed

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

border-style: dotted

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

2.2. Пример. Изменения цвета рамки при наведении курсора мыши

Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).

При наведении курсора мыши на блок цвет рамки изменится

Вот как это выглядит на странице:

2.3. Пример. Как сделать прозрачную рамку border

Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)

Вот как это выглядит на странице:

3. Толщина границы: свойство border-width

Задает толщину линии. Ранее мы задавали ее в едином описании border.

Синтаксис CSS border-width

border-width : thin | medium | thick | значение ;

• thin - тонкая толщина линии
• medium - средняя толщина линии
• thick - толстая толщина линии

Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны.

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

Вот как это выглядит на странице:

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

4. Как сделать рамку border только с одного края (границы)

У свойства CSS border есть производные свойства для задания односторонних границ у элемента:

• border-top - для задания рамки сверху (верхняя граница)
• border-bottom - для задания рамки снизу (нижняя граница)
• border-right - для задания рамки справа (правая граница)
• border-left - для задания рамки слева (левая граница)

Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.

Также есть свойства

• border-top-color - задание цвета верхний границы
• border-top-style - задание стиля верхней границы
• border-top-width - задание толщины верхней границы
• и т.д. для каждого направления

На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми

/* Описание двух одинаковых стилей: */

4.1. Пример. Красивая рамка для выделения цитат

Пример рамки для цитаты

Вот как это выглядит на странице:

Пример рамки для цитаты

Примечание
Можно задать отдельную границу для каждой из сторон.

5. Как сделать несколько границ border у элемента html

Иногда требуется сделать несколько границ. Приведем пример

5.1. Первый вариант с несколькими границами

Вот как это выглядит на странице:

Есть второй способ через наложение теней.

5.2. Наложение теней для создания нескольких границ

Вот как это выглядит на странице:

6. Скругление углов у границ (border-radius)

Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например

7. Вдавленная линия CSS

Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.

---

Вот как это выглядит на странице:

Для обращения к border из JavaScript нужно писать следующую конструкцию:

document.getElementById("elementID").style.border ="VALUE "

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определённых сторонах элемента, воспользуйтесь свойствами border-top , border-bottom , border-left , border-right .

Краткая информация

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

×

Значения

Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style . Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

Пример

U u ovom primjeru Oko bloka je dodan dvostruki rub. Rezultat je prikazan na sl. 2.

Riža. 2. Primjena svojstva granice

Objektni model

Objekt.stil.obrub

Bilješka

preglednik Internet Explorer do uključivo šeste verzije, s debljinom obruba od 1 px, prikazuje se točkasto kao isprekidano. S debljinom od 2 px i većom, točkasta vrijednost radi ispravno. Ova greška je ispravljena u IE7, ali samo za sve obrube od 1px. Ako jedan od rubova bloka ima debljinu od 2px ili veću, tada se u IE7 točkasta vrijednost pretvara u isprekidanu.

Stil obruba može se neznatno razlikovati između preglednika kada se koriste vrijednosti utora, grebena, umetka ili ispada.

Specifikacija

Svaka specifikacija prolazi kroz nekoliko faza odobravanja.

• Preporuka - Specifikaciju je odobrio W3C i preporučuje se kao standard.
• Preporuka kandidata ( Moguća preporuka ) - skupina odgovorna za standard je zadovoljna da on ispunjava svoje ciljeve, ali joj je potrebna pomoć razvojne zajednice za implementaciju standarda.
• Predložena preporuka Predložena preporuka) - u ovoj fazi dokument se podnosi Savjetodavnom vijeću W3C na konačno odobrenje.
• Radni nacrt - zrelija verzija nacrta o kojoj se raspravljalo i dopunjena radi pregleda zajednice.
• Urednikov nacrt ( Urednički nacrt) - nacrt verzije standarda nakon izmjena koje su izvršili urednici projekta.
• Nacrt ( Nacrt specifikacije) - prva verzija nacrta standarda.

×

Siguran sam da ste već upoznati sa svojstvom border css. Hoćete li naučiti nešto novo o css borderu što prije niste znali? Pa, ne samo da ćete naučiti, već ćete i vidjeti nekoliko novih stvari koje prije niste znali!

Ne samo da se CSS3 može koristiti za stvaranje zaobljenih kutova, već se za stvaranje može koristiti i čisti CSS kod složenih oblika. Ranije ste mogli koristiti pozadinsku sliku da biste dali izgled zaobljenih kutova. Zahvaljujući novim tehnikama za korištenje okvira, to možemo učiniti s čistim CSS kodom.

Osnove korištenja css bordera

Vjerojatno ste već upoznati standardna uporaba svojstva granice:

Obrub: 1px puna crna;

Gornji kod će ispisati rub od 1px koji će biti crn. Jednostavno i lako. Također možete malo proširiti sintaksu:

Širina ruba: debljina; rubni stil: čvrsta; boja obruba: crna;

Kao dodatak, možete koristiti određene vrijednosti za svojstvo border-width, tri ključne riječi a: tanak, srednji, debeo.

Ali korištenje proširene sintakse nije uvijek praktično. Pogledajmo primjer kada trebate promijeniti boju blok okvira kada lebdite mišem. U ovom slučaju, korištenje skraćene sintakse mnogo je jednostavnije:

Okvir ( obrub: 1px puno crveno; ) .box:hover ( obrub: 1px puno zeleno; )

Elegantniji i jednostavniji način da to učinite je:

Okvir (obrub: 1px puna crvena; ) .box:hover (boja obruba: zelena; )

Kao što vidite, napredna tehnika je također korisna kada mijenjamo samo neka svojstva: širinu, stil, boju i druga.

Granica-radijus

Granica-radius- Ovo je "zlatno" svojstvo CSS3 - prvo, najčešće svojstvo koje je postalo praktično i korisno. Osim za IE8 i niže verzije, svi preglednici prikazuju zaobljene kutove pomoću ovoga.

No, potrebno je koristiti posebne prefikse za Webkit i Mozillu da bi stil bio točan.

Webkit-border-radius: 10px; -moz-border-radius: 10px; rubni radijus: 10px;

Danas možemo ukloniti posebne prefikse i koristiti standardna forma granični radijus.

Još jedna pogodnost je da možemo koristiti posebne vrijednosti za svaku stranu bloka:

Border-top-left-radius: 20px; granica-gore-desno-radijus: 0; granica-dolje-desno-radijus: 30px; granica-dolje-lijevo-radijus: 0;

U gornjem kodu, postavljanje radijusa border-top-right i border-bottom-left-radius na "null" može postići neke nevjerojatne oblike. Iako element može naslijediti neka svojstva koja će se morati resetirati.

Slično margini i paddingu, možemo komprimirati sintaksu:

/* gore lijevo, Gore desno, dolje desno, dolje lijevo */ border-radius: 20px 0 30px 0;

Kao primjer korištenja svojstva border-radius, pokazat ću vam "limun" koji dizajneri često koriste kada dizajniraju web stranice:

Limun (širina: 200px; visina: 200px; pozadina: #F5F240; obrub: 1px puni #F0D900; radijus obruba: 10px 150px 30px 150px; )

Idemo dalje od osnova

Za mnoge dizajnere svo znanje u području svojstava CSS granica ovdje završava. Ali ima ih još nekoliko cool stvari, s kojim možete stvarati nevjerojatne stvari!

Složene css granične strukture

Postoje mnoge tehnike za stvaranje dizajna pomoću složenih graničnih struktura. Na primjer, pogledajmo sljedeće...

Stil ruba

Uvijek koristimo najpoznatija svojstva čvrsto, isprekidano i točkasto. Ali postoji nekoliko drugih svojstava stila obruba: utor i greben.

Obrub: 20px utor #e3e3e3;

Ili u proširenoj sintaksi:

Boja obruba: #e3e3e3; border-width: 20px; rubni stil: žlijeb;

Iako su ova svojstva korisna, ona nisu osnova za stvaranje složenih okvira.

Obris

Najpopularnija tehnika za stvaranje dvostrukog obruba je korištenje svojstva obrisa.

Kutija (obrub: 5px puni #292929; obris: 5px puni #e3e3e3;)

Ova metoda radi odlično, iako nas ograničava na samo dva okvira. Ponekad trebate stvoriti gradijentnu granicu koja se sastoji od mnogo slojeva... kako onda?

Pseudoelementi

Kada tehnika obrisa nije dovoljna, alternativna sredstva je korištenje pseudo elemenata:prije i:poslije. Pomoću kojih možete dodati dodatne okvire elementu:

Okvir (širina: 200px; visina: 200px; pozadina: #e3e3e3; položaj: relativan; obrub: 10px puno zeleno; ) /* Stvorite dva okvira s ista širina spremnika */ .box:after, .box:before ( sadržaj: ""; pozicija: apsolutna; vrh: 0; lijevo: 0; dno: 0; desno: 0; ) .box:after ( granica: 5 px puno crveno; obris: 5 px puno žuto; ) .box:before ( obrub: 10 px puno plavo; )

Ne izgleda baš elegantno, ali barem, radi. Malo je teško shvatiti redoslijed boja unutar okvira... ali možete to shvatiti.

Kutija-Sjena

Zanimljiv "dječji način" za stvaranje sličnog efekta je korištenje CSS3 svojstva box-shadow:

Okvir ( obrub: 5 px puna crvena; sjena okvira: 0 0 0 5 px zelena, 0 0 0 10 px žuta, 0 0 0 15 px narančasta; )

U ovom smo slučaju bili pametniji i upotrijebili namjensko svojstvo box-shadow. Promjenom parametara x, y, zamućenja na nulu, možemo koristiti različite boje za stvaranje više okvira.

Ali postoji problem: u starijim preglednicima koji ne razumiju svojstvo box-shadow, bit će vidljiv samo jedan crveni okvir od 5 px.

"Zapamtiti! Dizajn stranice trebao bi izgledati kao cross-browser, odnosno isti u svim preglednicima. Uključujući starije verzije."

Mijenjanje kutova

Pored korištenog jednostavno značenje border-radius, možemo navesti dva odvojena - odvajajući ih kroz / naznačit ćemo vodoravni i okomiti radijus.

Na primjer:

Polumjer ruba: 50px / 100px; /* vodoravni radijus, okomiti radijus */

... ovo je ekvivalentno:

Border-top-left-radius: 50px 100px; granica-gore-desno-radijus: 50px 100px; granica-dolje-desno-radijus: 50px 100px; granica-dolje-lijevo-radijus: 50px 100px;

Ova tehnika je prikladna za stvaranje jedinstvenih oblika blokova. Na primjer, evo kako stvoriti učinak zamotanog papira:

Okvir (širina: 200px; visina: 200px; pozadina: #666; border-top-left-radius: 15em 1em; border-bottom-right-radius: 15em 1em; )

CSS obrasci koji koriste okvir

Ova tehnika pokazuje kako možete kreirati CSS forme, koristeći elemente s nultim dimenzijama visine i širine. Iznenađen? Pogledajmo primjer...

Za sljedećih nekoliko primjera koristit ćemo sljedeće oznake:

...i sljedeći osnovni stil:

Okvir (širina: 200 px; visina: 200 px; pozadina: crna; )

Najviše uobičajeni primjer koristeći CSS oblici - stvarajući tekuću strelicu. Tajna ove strelice leži u stvaranju obruba sa različite boje za svaku od stranaka. Zatim postavite atribute širine i visine na 0.

Dodijelimo se div blok klasa strijele:

Strelica (širina: 0; visina: 0; obrub-gornje: 100px puno crveno; obrub-desno: 100px puno zeleno; rub-dno: 100px puno plavo; rub-lijevo: 100px puno žuto; )

Za demonstraciju, prvo koristimo proširenu sintaksu. Sljedeće možemo ukloniti dodatni kod koristeći skraćenu sintaksu:

Strelica ( širina: 0; visina: 0; obrub: 100 px čvrsta; boja obruba: crvena zelena plava žuta; )

Zanimljivo, zar ne? Sada ćemo postaviti prozirne boje na sve strane osim na plavu stranu.

Strelica ( širina: 0; visina: 0; obrub: 100 px čvrsta; boja donje granice: plava; )

Ispalo je super! Ali ovo je u suprotnosti semantički raspored, stvorite .arrow div, samo da dodate strelicu na stranicu. U tu svrhu možemo koristiti pseudoelemente, što ćemo sada i učiniti.

Napravite govorni oblačić

Za izradu oblačića govora potreban nam je mali komad čisti CSS kod i jedan div blok.

Oblačić govora (položaj: relativan; boja pozadine: #292929; širina: 200 px; visina: 150 px; visina linije: 150 px; /* okomito središte */ boja: bijela; poravnanje teksta: središte; )

Govorni oblačić:nakon ( sadržaj: ""; )

U ovoj fazi kreirat ćemo strelicu koju smo prije napravili, dodati je elementu i sve što preostaje je pozicionirati je:

Speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 10px solid; border-color: red green blue yellow; )

Ako želimo da strelica pokazuje prema dolje, morat ćemo postaviti sve obrube na prozirne osim gornjeg.

Speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 10px solid; border-top-color: red; )

Kada ovo stvorimo CSS oblik, ne možemo konkretno naznačiti veličinu strelice. Umjesto toga, možemo postaviti svojstvo border-width, koje će dodijeliti veličinu strelice. Postavit ćemo i položaj strelice na dnu u sredini. U skladu s tim, za to koristimo vrijednosti gore i lijevo.

Speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: red; top: 100%; left: 50%; )

Osim toga, samo mu trebamo dati istu boju kao blok. Zapamtite, prilikom pozicioniranja morate uzeti u obzir veličinu ostalih obruba, koji su nevidljivi (15px). Bloku ćemo također zaokružiti uglove.

Speech-bubble ( /* … ostali stilovi */ border-radius: 10px; ) .speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 15px solid; border-top -boja: #292929; gore: 100%; lijevo: 50%; margina-lijevo: -15px; /* podešavanje širine obruba */ )

Nije loše, ha? Koristeći nekoliko CSS klasa i trikova s ​​granicama, možete stvoriti takvu stvar.

/* Upotreba oblačića govora: Primijenite klasu .speech-bubble i .speech-bubble-DIRECTION kao što je prikazano u nastavku

*/ .speech-bubble ( položaj: relativan; boja pozadine: #292929; širina: 200px; visina: 150px; visina linije: 150px; /* okomito središte */ boja: bijela; poravnanje teksta: središte; obrub- radius: 10px; font-family: sans-serif; ) .speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 15px solid; ) /* Postavite strelicu */ .speech-bubble-top:after (border-bottom-color: #292929; lijevo: 50%; bottom: 100%; margin-left: -15px; ) .speech-bubble-right:after (border-left-color : #292929; lijevo: 100%; vrh: 50%; margin-top: -15px; ) .speech-bubble-bottom:after (border-top-color: #292929; vrh: 100%; lijevo: 50%; margin-left: -15px; ) .speech-bubble-left:after (border-right-color: #292929; top: 50%; right: 100%; margin-top: -15px; )

Bonus! Okomito centriranje unutar bloka

Za jedan redak teksta možete koristiti line-height. Ali ako imate dva ili više linija tekst... Najbolje rješenjeće postaviti svojstvo prikaza na tablicu i staviti sav tekst u paragraf. Ovako to izgleda na html markup: