Ivica padding css. Uvlake i margine

07.04.2019 Zanimljivo

CSS Layout oduvek je pravougaona. Sve glatke linije su u nadležnosti programera. Pravila stila pružaju dovoljno opcija da stranici daju glatki oblik unutar granica rezolucije ekrana. Ali svaki element rasporeda je uvijek pravougaonik u kojem je raspored informacija vođen CSS pravilima.

Pading sa svih strana je važan za svaki element stranice kada je apsolutno pozicioniran, a CSS gornji padding je posebno definisan jer je važan za razni elementi, posebno malim slovima.

Osnovna pravila pozicioniranja

Blok element ima pravilo margine, pravilo dopuna za elemente unutar njega i širinu ivice koja se također može koristiti.

Udubljenje na vrhu je od posebnog značaja. CSS unutar bloka povezuje pravila dopuna s pravilima za apsolutno i relativno pozicionirane elemente unutar tog bloka.

Uobičajena praksa za CSS pravila: možete odrediti padding sa svih strana podjednako, u parovima gore/dolje i desno/lijevo, ili za svaku stranu posebno. Na primjer,

margina: 10px;
padding: 10px20px;
padding: 10px20px30px40px.

U prvom slučaju postavlja se uvlačenje elementa sa strana vanjskog spremnika u kojem se nalazi. U drugom slučaju, margine na vrhu i dnu su 10px, na lijevoj i desnoj - 20px. U trećem slučaju, veličina udubljenja je naznačena sa svih strana: gore, desno, dolje i lijevo.

U svim ovim slučajevima, udubljenje gornji CSS je 10 px.

Pravila koja mijenjaju položaj elemenata

Ako element izgleda nije pozicioniran apsolutno, on se postavlja unutra opšta procedura formiranje stranice.

Ako definišemo padding na vrhu CSS u elementu scCurrInfo, cilj će biti postignut, ali ako na nivou li neće.

IN u ovom primjeru korištenje pravila za popunjavanje: 40px; zahtijeva adekvatno smanjenje pravila širine i visine za 80px. Inače će veličina scCurrInfo bloka premašiti granice vanjskog bloka.

Ako uklonimo pravilo paddinga iz opisa scCurrInfo, ali ga dodamo sa vrijednošću od 20px opisu stila stavke liste, dobićemo samo top indent. CSS neće primijeniti ovu vrijednost na druge strane.

Naravno, ova upotreba pravila uvlačenja primjenjuje se na svaki li element.

Opće prakse formatiranja sadržaja

Neki programeri postižu savršenstvo postavljanjem stranica blok elementi. Očigledno je klasična praksa da počnete sa stolovima i završite sa svojim obrazovni proces na blokovima.

Sloboda svojstvena rasporedu blokova je fascinantna, a mašta programera možda nije ograničena strogim pravilima tablice: samo redovi, samo ćelije, spajanje samo horizontalno i okomito. Ništa neobično za relacijske ideje.

U međuvremenu, stolovi, pored očiglednih nedostataka, imaju mnoge kvalitativne prednosti. Kada kreirate padding na vrhu, CSS uzima u obzir padding sa leve, desne strane (dole je poseban trenutak). Pravila ćelija tabele vam omogućavaju da kontrolišete i vertikalno i horizontalno poravnanje. Koristeći stilove redova i kombinirajući ih sa stilovima ćelija, možete kreirati složene prikaze sadržaja.

Uobičajeno predstavljanje stranice u obliku pravougaonika uopće ne sprječava da se prikaže u obliku tabele. To su također pravokutnici, ali su i ćelije tabele, odnosno imaju svoja pravila koja dopunjuju pravila blokova.

Apsolutno pozicioniranje

Blokirajte pravilom POSITION: absolute ; će se nalaziti na lokaciji određenoj svojim koordinatama u odnosu na blok u kojem se nalazi.

Karakteristična karakteristika CSS pravila je "vježbanje - najbolji kriterijum istina" u većini slučajeva, posebno kada je potrebna kompatibilnost među pretraživačima i raspored se radi ručno, bolje je proučavati punopravne priručnike na kaskadnim stilskim listovima.

Korištenje tablica često dovodi do problema sa pomjeranjem sadržaja ćelije. Sličan pomak unutar bloka ne utječe uvijek na sve elemente. Eksperimentiranjem možete postići željeni rezultat. Trivijalan zadatak: kako uklanjanje gornjeg paddinga nije uvijek trivijalno rješenje za CSS.

U nekim slučajevima, kada morate rasporediti elemente stranice u dubini nekih popularan sistem upravljanje sadržajem web stranice, ipak je potrebno obratiti pažnju ne samo na eksperimentalnu praksu, već i na iskustva kolega.

Margine i padding su veoma važni stilovi pri izradi HTML stranice. Omogućuju vam preciznije pozicioniranje elemenata, stvaranje okvira s potrebnim prazninama itd. Oba stila su vrlo slična i obavljaju slične funkcije. Ali i dalje postoje razlike.

Elementi mogu biti ugniježđeni ili smješteni jedan pored drugog. Pogledajmo sljedeći primjer:

Imamo dva stola, limun i plava boja, koji se nalaze jedan ispod drugog. Tabele se sastoje od jedne ćelije. U prvoj ćeliji tabele nalazi se crveni blok. Koristeći ovaj primjer, pogledajmo kako funkcionišu margine i uvlake.

Polja su određena stilom padding. Ovaj stil se primjenjuje samo na elemente kontejnera, koji mogu sadržavati druge elemente. Stil vam omogućava da postavite marginu između ivica elementa i njegovog sadržaja. Stil margina omogućava vam da postavite uvlake od elementa do najbližih granica drugog elementa. Granice drugog elementa mogu biti ivice roditeljskog kontejnera, kao i ivice same stranice.

Postoji nekoliko načina za postavljanje ovih stilova. Na primjer, direktno navedite veličinu svih margina ili uvlaka jednim argumentom u nekoj mjernoj jedinici (px, ex, em, pt, cm itd.):

padding: 3px; margina: 3px;

U ovom slučaju, margine i uvlake će biti iste na sve četiri strane. Prilikom navođenja dva argumenta odvojena razmakom:

padding: 3px 5px; margina: 3px 5px;

prvi će odrediti količinu margina/uvlaka na vrhu i dnu, drugi - na lijevoj i desnoj strani. Kada se daju tri argumenta:

padding: 3px 5px 2px; margina: 3px 5px 2px;

prva je margina/udubljenje na vrhu, druga je i lijevo i desno, treća je na dnu. Sa četiri argumenta:

padding: 3px 5px 2px 6px; margina : 3px 5px 2px 6px ;

prvi je margina/razmak na vrhu, drugi je desno, treći je dolje, četvrti je lijevo. Lako je zapamtiti: prvi je odozgo, a zatim u smjeru kazaljke na satu. Osim toga, možete zasebno postaviti margine i padding za određenu ivicu, koristeći odgovarajuće stilove: padding-top, padding-desno, padding-bottom, padding-left, margin-top, margin-desno, margin-bottom, margin-left. Vrijednost ovih stilova može biti samo jedan argument, koji specificira količinu margine/ispuna za datu stranu.

Na slici se crveni blok nalazi unutar ćelije tabele i pored njenih granica, odnosno ćelija nema margine. Postavimo margine ćelije koristeći stil:

padding: 5px;

Kao rezultat, stranica će se promijeniti u sljedeće:

Pogledajmo sada udubljenja. Dvije tabele su jedna uz drugu, ako želimo da ih malo razmaknemo, možemo primijeniti uvlake. Ovdje postoje dvije opcije: ili postavite donju uvlaku prve tablice ili gornju uvlaku druge tablice. Koristimo drugu:

margin-top: 5px;

Imajte na umu da uvlačenje postavljamo posebno za tabelu, a ne za ćeliju tabele, kao što je slučaj sa poljima. Evo rezultata:

Inače, u prvom slučaju (razmak između crvenog bloka i granica roditeljske ćelije), isti efekat bi se mogao postići postavljanjem uvlaka bloka. Općenito, ako nešto nije jasno, javite nam u komentarima.

HTML kod test stranice:

<html > <glava > <naslov > Test</naslov> <meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" > </head> <tijelo > <stil > tablica (širina: 200px; visina: 150px; granica: 1px čvrsta #555; border-collapse: kolaps) td (vertical-align: top; padding: 0px) div (širina: 100px; visina: 100px; pozadina: crvena)</style> <table style = "pozadina: kreč" > <tr > <td style = "padding: 5px" > <div style = "margin: 0px" ></div> </td> </tr> </table> <stil stola = "pozadina: nebeskoplava; margin-top: 5px"> <tr > <td ></td> </tr> </table> </tijelo> </html>

Dobar dan! Postavljanje uvlaka za tekst i slike glavna je tema današnje publikacije. Pogledajmo bliže koji pristupi se mogu primijeniti u praksi.

Prilikom izrade web stranice, webmaster se bavi tekstualnim blokovima i frazama postavljenim na stranicama projekta. Rješavanje individualnih problema uključuje koristeći HTML oznake dodane u uređivač. Postoji nekoliko tipova atributa koji vam omogućavaju premještanje fraza ili promjenu lokacije fragmenata elektronska stranica.

Postavljanje uvlaka umetanjem razmaka

Pogledajmo kako uvući tekst u HTML koristeći posebna oznaka, osiguravajući stvaranje praznine. Potrebno je uneti kod potreban broj puta kako bi se postiglo željeno odstupanje od ivice stranice.

Gore navedeni kod mogu obraditi sve vrste pretraživača, a webmaster će dobiti zajamčeni rezultat. Nedostatak ove metode su njene ograničene mogućnosti, jer je za povećanje udaljenosti potrebno dodati velika količina oznake, a to zatrpava dokument.

Primjena oznake citata

Proučavajući detaljno kako uvući tekst u HTML kodu, možete naići alternativna metoda, davanje više mogućnosti.

Ovdje ćete morati koristiti blok citata, koji vam omogućava da pomjerite fragment lijevo i desno za oko 40 px. Dovoljno je napisati kod identičan navedenom primjeru:

Metoda vam omogućava da manipulišete frazama unutar fiksne vrijednosti od 40 px. Također je vrijedno napomenuti da u ovu oznaku obično završavaju citatom.

Alternativne opcije

Ako planirate da se pomerite na nestandardnu udaljenost, moraćete da koristite parametar uvlačenja teksta, koji se odnosi na stil CSS tabela. Metoda koja se razmatra osigurava stvaranje devijacije prvog reda za potrebna udaljenost. Potrebno je izvršiti sljedeće promjene u uređivaču:

Kada je potrebno izmjeriti potreban broj piksela sa slike, preferiraju se jednostavni ali efikasni kodovi.

U prvom slučaju postavljaju se samo vrijednosti pomaka od ivica slike. U drugom, položaj slike je postavljen na lijevu ivicu s tekstom koji teče udesno, au trećem - obrnuto.

Informacijama je došao kraj. Recite mi, jeste li pronašli informacije koje ste tražili? Odgovor možete napisati u komentarima.

Na kraju, spomenut ću da je Workip blog prvenstveno posvećen monetarnim opcijama za zarađivanje novca na internetu. Znate li koje metode su zaista finansijski obećavajuće? Opisi nekih od njih su već objavljeni.

Objavljivanje materijala se nastavlja. Pretplatite se na email za ažuriranja projekta. Vidimo se kasnije.

Web resurs korisnici ocjenjuju na osnovu njegove vizuelne privlačnosti. Dakle, čak i informativno koristan tekst možda neće biti pročitan zbog činjenice da je loše formatiran. Zaključak - morate pažljivo i pažljivo pristupiti ne samo semantičkom sadržaju stranica web-mjesta, već i njegovom vizuelno predstavljanje. Izgled CSS tehnologije proširili su mogućnosti kreiranja atraktivnih članaka. Jedno od svojstava dizajniranih da olakšaju čitanje onoga što je napisano je uvlačenje. CSS tekst.

Margine i padding: u čemu je razlika?

Prije nego počnete s formatiranjem teksta, trebali biste razumjeti što su margine i uvlake. Unatoč činjenici da ovi elementi označavanja u nekim slučajevima izgledaju isto za korisnika, postoje fundamentalne razlike između njih:

polje je specificirano svojstvom padding, uvlačenje - margina;
margina je određena razmakom između sadržaja i granice bloka, uvlačenje - između granica susjednih blokova;
margine se mogu ili ne moraju uzeti u obzir u dimenzijama elementa (širina i visina).

margin property

Dakle, da postavite horizontalno ili vertikalno uvlačenje CSS teksta, koristite konstrukciju margina. Ovo svojstvo se odnosi na oznaku definisanje paragrafa dokumenta. U samom jednostavan slučaj napisano je kao:

margina: 12px.

Ova linija znači da će oko bloka teksta (ili bilo kojeg drugog bloka) biti udubljenje od 12 piksela sa svih strana. Da biste povećali interval, na primjer, tri puta, samo napišite:

margina: 36px.

Ali šta ako bi interval između blokova trebao biti različit na svakoj strani? Programeri web stranica koriste nekoliko oblika snimanja:

margina: 11px 22px.
margina: 11px 22px 33px.
margina: 11px 22px 33px 44px.

U prvom primjeru, 11 piksela će biti uvučeno od donje i gornje granice bloka, a 22 piksela sa strane bloka. Prema drugom obrascu za snimanje, između gornje ivice bloka i sadržaja će biti 11 piksela, između donje 33 piksela, a sa strane 22 piksela. U trećem slučaju, padding će biti 11 piksela na vrhu, 22 piksela na desnoj strani, 33 piksela na dnu i 44 piksela na lijevoj strani.

Također je moguće snimiti udaljenost do granice bloka samo s jedne strane: margin-top, margin-bottom, margin-left, margin-right. Prevodeći nazive nekretnina na ruski, lako je pogoditi njihovu svrhu. Na primjer, sljedeći unos kaže da će desna margina biti 22 piksela:

margin-desno: 22px.

Za druge strane se pretpostavlja da su udaljenosti oko bloka jednake vrijednosti roditeljskog elementa.

Nekretnina margina ima funkciju koju programer mora imati na umu kada koristi vertikalno uvlačenje CSS teksta. Intervali susjednih elemenata se ne zbrajaju, već se nalažu jedan na drugi. Na primjer, neka ima jedan od blokova margin-bottom: 15px, i blok pored njega ispod margin-top: 35px. Školska aritmetika i zdrav razum sugeriraju da će ukupan razmak između njih biti 50 piksela. U praksi to nije slučaj. Blokiraj sa velika vrijednost svojstva marginaće "apsorbovati" svog suseda. Kao rezultat, razmak između elemenata će biti 35 piksela.

"Crvena linija

Izrada dokumenta u uređivač teksta, korisnici radije pitaju svaki novi stav koristeći crvenu liniju. Uz pomoć CSS-a, lako je uvući tekst na lijevoj strani - koristi se konstrukcija uvlaka teksta. Napisano je ovako:

uvlaka teksta: 11px.

Odnosno, prvi red pasusa će biti pomaknut u odnosu na lijevu ivicu za 11 piksela. Da bi tekst na web stranici više ličio na dokument u uređivaču, potrebno je dodatno postaviti, odnosno napisati:

uvlaka teksta: 11px;

text-align: justify.

Osim piksela, prilikom opisivanja oznaka, dozvoljeno je koristiti i druge jedinice - inče, bodove, procente. Neka blok ima dopunu CSS teksta od 10%. Sa širinom bloka od 500 piksela, crvena linija će biti 50 piksela (10% od 500).

Za ove imovine vrijednost se može podesiti nasljediti. Ovaj unos kaže da blok koristi slično svojstvo roditeljskog bloka.

uvlaka teksta: naslijediti.

Iznenađujuće, može imati i negativne vrijednosti! U ovom slučaju se formiraju takozvani prevjesi, odnosno glavni tekst ostaje na mjestu, a prvi red se pomiče ulijevo za 22 piksela:

uvlaka teksta: -22px.

Da biste spriječili da slova idu dalje od lijeve granice pretraživača, pored uvlaka teksta trebate koristiti konstrukciju za postavljanje polja:

padding-left: 22px.

Pregledane su osnovne karakteristike CSS-a. A praksa će vam pomoći da ih konsolidujete. Evo nekoliko konačnih savjeta za primjenu onoga što ste naučili u razvoju vaše web stranice:

crvena linija i uvlačenje teksta su različiti koncepti, a različita svojstva se koriste za njihovo označavanje;
Za vertikalne margine pravila matematike ne vrijede - intervali se preklapaju, element sa većom vrijednošću "pobjeđuje";
negativan uvlačenje pasusa koristi se za označavanje prvog reda pasusa pomoću slike.

Pozdrav, dragi čitaoci blog stranice! Danas ćemo nastaviti sa učenjem o kaskadnim stilovima ili CSS-u. U prethodnim člancima koje smo već pogledali generalni nacrt blok raspored site. Kao rezultat toga, počeli smo da imamo prilično profesionalne web stranice, ali im je nešto nedostajalo. Ali najvjerovatnije im nedostaju udubljenja i okviri. Danas ćemo pogledati pravila stila margina, paddinga i obruba, koja vam omogućavaju da postavite uvlake i okvire za html elemente.

CSS Padding Options

Uz pomoć kaskadnih stilskih tablica moguće je postaviti dvije vrste uvlaka.

1.Udubljenje je udaljenost od imaginarne granice elementa do njegovog sadržaja. Vrijednost udaljenosti je specificirana pomoću parametra padding. Ovo udubljenje pripada samom elementu i nalazi se unutar njega.

2. Margina— udaljenost između granice trenutnog elementa web stranice i granica susjednih elemenata, ili roditeljski element. Veličina udaljenosti je kontrolirana od strane imovine margina. Ovo udubljenje se nalazi izvan elementa.

Radi jasnoće slika:

Na primjer, uzmite u obzir ćeliju ispunjenu tekstom. Tada je padding udaljenost između imaginarne granice ćelije i teksta koji sadrži. A vanjska margina je udaljenost između granica susjednih ćelija. Počnimo sa paddingom.

Padding u CSS-u koristeći padding (gore, dolje, lijevo, desno)

Svojstva stilova padding-left, padding-top, padding-right i padding-bottom vam omogućavaju da postavite vrijednosti paddinga, redom, na lijevoj, vrhu, desno i dnu elementa web stranice:

Količina uvlačenja može se odrediti u pikselima (px), procentima (%) ili drugim jedinicama prihvatljivim za CSS. Prilikom specificiranja postotaka, vrijednost se izračunava iz širine elementa. Značenje nasledstva označava da je naslijeđen od roditelja.

Na primjer, za trenutni pasus, primijenio sam pravilo stila koje postavlja lijevi padding na 20 piksela, gornji padding na 5 piksela, desni padding na 35 piksela, a donji padding na 10 piksela. Unos pravila će izgledati ovako:

p.test(
padding-left:20px;
padding-top:5px;
padding-right:35px;
padding-bottom:10px
}

Pravilo kompozitnog dopuna omogućava vam da navedete uvlake na svim stranama elementa web stranice odjednom:

padding:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

IN kolektivna vladavina Možete koristiti jednu, dvije, tri ili četiri vrijednosti, odvajajući ih razmakom. U ovom slučaju, učinak ovisi o broju vrijednosti:

ako navedete jednu vrijednost, ona će postaviti količinu uvlačenja na svim stranama elementa stranice;
ako navedete dvije vrijednosti, prva će postaviti količinu uvlačenja na vrhu i dnu, a druga - lijevo i desno;
ako navedete tri vrijednosti, tada će prva odrediti količinu udubljenja na vrhu, druga - lijevo i desno, a treća - na dnu;
ako su navedene četiri vrijednosti, prva će postaviti količinu uvlačenja na vrhu, druga na desno, treća na dnu, a četvrta na lijevo.

Stoga se CSS pravilo iznad može skratiti što je više moguće i napisati na sljedeći način:

p.test( padding:5px 35px 10px 20px)

Svojstvo margine ili margine u CSS-u

Atributi stila margin-left, margin-top, margin-right i margin-bottom vam omogućavaju da postavite vrijednosti margine, odnosno lijevo, gore, desno i dolje:

Kao što je gore spomenuto, margina je udaljenost od granice trenutnog elementa do granice susjednog elementa, ili, ako nema susjednih elemenata, do unutrašnje granice roditeljskog kontejnera.

Količina uvlačenja može se odrediti u pikselima (px), postocima (%) ili drugim jedinicama dozvoljenim za CSS:

p(
margin-left: 20px;
}
h1(
margin-right:15%;
}

Vrijednost auto znači da će pretraživač automatski izračunati veličinu uvlake. Ako koristite procentualni zapis, udubljenja se izračunavaju ovisno o širina roditeljskog kontejnera. Štaviše, ovo se odnosi ne samo na marginu-lijevu i marginu-desnu, već i za marginu-vrh i marginu-dolje, procentualne margine će se izračunati ovisno o širini, a ne visini, kontejnera.

Dozvoljeno je koristiti kao vrijednosti vanjskih uvlaka negativne vrijednosti:

p(
margin-left:-20px;
}

Ako se, sa pozitivnim vrijednostima uvlake, susjedni elementi pomaknu, onda sa negativnu vrijednost susjedni blok će se sudariti s elementom za koji smo postavili takav negativan pomak.

Također možemo odrediti padding koristeći atribut style margina. Postavlja vrijednosti uvlačenja istovremeno na svim stranama elementa web stranice:

margina:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Kada specificirate jednu, dvije, tri ili četiri vrijednosti dopuna, ovo svojstvo poštuje iste zakone kao i pravilo dopunjavanja.

Opcije ivice pomoću svojstva Border

Prilikom postavljanja okvira postoje tri vrste parametara:

border-width — debljina granice;
border-color — boja ivice;
border-style — vrsta linije kojom će okvir biti nacrtan.

Počnimo s parametrom debljine okvira:

border-width: [vrijednost | tanak | srednje | debljina] (1,4) | nasljediti

Debljina okvira može se specificirati u pikselima, ili u drugim dostupnim u css jedinice. Tanke, srednje i debele varijable postavljaju debljinu granice na 2, 4 i 6 piksela, redom:

border-width:medium;

Kao i kod svojstava paddinga i margine, parametar border-width dozvoljava jednu, dvije, tri ili četiri vrijednosti, čime se postavlja širina ivice za sve strane odjednom ili za svaku stranu posebno:

granica širine: 5px 3px 5px 3px

Za trenutni pasus, napravite debljinu gornjeg ruba 1px, desnog 2px, donjeg 3px i lijevog 4px koristeći pravilo (širina ivice: 1px 2px 3px 4px;)

Koristeći atribute stila border-left-width, border-top-width, border-right-width i border-bottom-width, možete postaviti debljinu lijeve, gornje, desne i donje strane ivice, respektivno:

Sljedeći parametar je boja granica s kojom možete kontrolirati boja okvira:

border-color: [boja | transparentan] (1,4) | nasljediti

Svojstvo vam omogućava da postavite boju ivice za sve strane elementa odjednom ili samo za navedene. Kao vrijednost, možete koristiti metode za određivanje boja prihvaćenih u HTML-u: heksadecimalni kod, ključne riječi, itd.:

p (širina ivice: 2px; boja ivice: crvena)

transparent postavlja prozirnu boju ivice, a inherit nasljeđuje vrijednost roditelja. Prema zadanim postavkama, ako boja obruba nije navedena, koristit će se ona koja se koristi za font unutar elementa.

Koristeći atribute stila border-left-color, border-top-color, border-right-color i border-bottom-color, možete postaviti boju lijeve, gornje, desne i donje strane ivice, redom:

I posljednji parametar Border-style specificira tip okvira:

obrubni stil: (1,4) | nasljediti

Tip okvira se može specificirati za sve strane elementa odjednom ili samo za one navedene. Može se koristiti nekoliko vrijednosti ključne riječi. Izgled će zavisiti od pretraživača koji se koristi i debljine okvira. Značenje nijedan se koristi po defaultu i ne prikazuje okvir i njegova debljina je postavljena na nulu. Skrivena vrijednost ima isti učinak. Rezultirajući okvir za ostale vrijednosti, ovisno o debljini, prikazan je u donjoj tabeli:

Atributi stila border-left-style, border-top-style, border-right-style i border-bottom-style specificiraju stil linija koje će biti nacrtane na lijevoj, gornjoj, desnoj i donjoj strani ivice, odnosno:

Kao i kod opcija dopuna i dopuna, postoje univerzalno vlasništvo granica. Omogućava vam da istovremeno postavite debljinu, stil i boju ivice oko elementa:

granica: | nasljediti

Vrijednosti mogu biti bilo kojim redoslijedom, odvojene razmacima:

td (rub: 1px puna žuta)

Da biste postavili obrub samo na određenim stranama elementa, postoje svojstva border-top, border-bottom, border-left, border-right, koja vam omogućavaju postavljanje parametara za vrh, dno, lijevo i desna strana okvir

Ostaje samo da rezimiramo:

za zadatak padding koristimo imovinu padding;
za podešavanja margine postoji pravilo margina;
parametri okvira su specificirani pomoću atributa granica.

Napominjem da sve ovo css svojstva povećati veličinu elementa web stranice. Stoga, ako promijenimo debljinu obruba ili veličinu dopuna blok-kontejnera koji čine dizajn web stranice, morat ćemo u skladu s tim promijeniti i veličine ovih kontejnera, inače se mogu pomjeriti i dizajn će biti slomljena.

To je sve, vidimo se sledeći put!