Html zamik desno od roba. Naučite se zamikati besedilo v html. Zunanji rob z lastnostjo "rob" CSS

Pozdravljeni, dragi bralci spletnega dnevnika! Danes bomo nadaljevali s preučevanjem Cascading Style Sheets ali CSS. V prejšnjih člankih smo že na splošno obravnavali blokovno postavitev spletnega mesta. Posledično smo začeli dobivati precej profesionalne spletne strani, ki pa jim nekaj manjka. In najverjetneje nimajo zamikov in okvirjev. Danes si bomo ogledali pravila sloga robov, oblazinjenja in obrob, ki vam omogočajo nastavitev oblazinjenja in obrob za elemente html.

Možnosti oblazinjenja CSS

Pri kaskadnih slogovnih listih obstajata dve vrsti zamikov.

1.zamik je razdalja od namišljene meje elementa do njegove vsebine. Vrednost razdalje se nastavi s parametrom oblazinjenje. Taka alineja pripada samemu elementu in se nahaja znotraj njega.

2. Zunanje polnilo- razdalja med robom trenutnega elementa spletne strani in robom sosednjih elementov oziroma nadrejenega elementa. Velikost razdalje nadzira lastnina marža. To oblazinjenje je zunaj elementa.

Slika za jasnost:

Na primer, razmislite o celici, napolnjeni z besedilom. Nato je oblazinjenje razdalja med namišljeno mejo celice in besedilom, ki ga vsebuje. In zunanja alineja je razdalja med mejami sosednjih celic. Začnimo z alinejami.

Oblazinjenje CSS z oblazinjenjem (zgoraj, spodaj, levo, desno)

Lastnosti sloga padding-left, padding-top, padding-right in padding-bottom vam omogočajo, da nastavite vrednosti oblazinjenja za levi, zgornji, desni in spodnji del elementa spletne strani:

Količino polnila lahko določite v slikovnih pikah (px), odstotkih (%) ali drugih sprejemljivih enotah CSS. Pri podajanju odstotkov se vrednost izračuna iz širine elementa. Podedovana vrednost označuje, da je podedovana od starša.

Na primer, za trenutni odstavek sem uporabil slogovno pravilo, ki določa levi zamik 20 slikovnih pik, zgornji zamik 5 slikovnih pik, desni zamik 35 slikovnih pik in spodnji zamik 10 slikovnih pik. Vnos pravila bo videti takole:

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

Prefabricirano pravilo za oblazinjenje vam omogoča, da določite zamike na vseh straneh elementa spletne strani hkrati:

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

V montažnem pravilu je dovoljeno uporabiti eno, dve, tri ali štiri vrednosti, ki jih ločite s presledkom. V tem primeru je učinek odvisen od števila vrednosti:

če določite eno vrednost, bo nastavila količino zamika na vseh straneh elementa strani;
če določite dve vrednosti, bo prva nastavila količino zamika od zgoraj in spodaj, druga pa levo in desno;
če določite tri vrednosti, bo prva določila količino zamika od zgoraj, druga - od leve in desne ter tretja - od spodaj;
če so podane štiri vrednosti, bo prva nastavila oblazinjenje na vrh, druga na desno, tretja na dno in četrta na levo.

Tako lahko zgornje pravilo CSS čim bolj skrajšamo in zapišemo na naslednji način:

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

Lastnost robov ali robovi v CSS

Atributi sloga margin-left , margin-top , margin-desno in margin-bottom vam omogočajo, da nastavite količino roba levo, zgoraj, desno oziroma spodaj:

Kot je navedeno zgoraj, je rob razdalja od meje trenutnega elementa do meje sosednjega elementa ali, če ni sosednjih elementov, do notranje meje nadrejenega vsebnika.

Količina odmika se lahko določi v slikovnih pikah (px), odstotkih (%) ali drugih sprejemljivih enotah CSS:

p(
rob-levo: 20px;
}
h1(
desni rob: 15 %;
}

Samodejna vrednost pomeni, da bo oblazinjenje samodejno izračunal brskalnik. V primeru uporabe odstotnega zapisa se zamiki izračunajo glede na širina nadrejenega vsebnika. In to ne velja le za levi in desni rob, ampak tudi za zgornji in spodnji rob, odstotek odmika bo izračunan glede na širino, ne višine vsebnika.

Dovoljeno je uporabljati kot vrednosti zunanjih alinej negativne vrednosti:

p(
margin-left:-20px;
}

Če se pri pozitivnih vrednostih zamikov sosednji elementi odmaknejo, potem pri negativni vrednosti bo sosednji blok povozil element, za katerega smo nastavili tako negativen zamik.

Robove lahko določimo tudi z atributom style. marža. Istočasno nastavi vrednosti zamika na vseh straneh elementa spletne strani:

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

Ta lastnost v primeru nastavitve ene, dveh, treh ali štirih vrednosti oblazinjenja upošteva iste zakone kot pravilo oblazinjenja.

Možnosti meje z lastnostjo border

Pri nastavljanju okvirjev so na voljo tri vrste možnosti:

border-widd - širina roba;
border-color - barva obrobe;
border-style - vrsta črte, s katero bo narisana obroba.

Začnimo s parametrom debeline obrobe:

border-width: [vrednost | tanek | srednje | debelo] (1,4) | dedovati

debelina okvirja lahko nastavite v slikovnih pikah ali v drugih enotah, ki so na voljo v css. Spremenljivke tanka, srednja in debela nastavijo debelino obrobe na 2, 4 oziroma 6 slikovnih pik:

širina obrobe: srednja;

Tako kot pri lastnostih oblazinjenja in roba so za parameter širine obrobe dovoljene ena, dve, tri ali štiri vrednosti, s čimer se nastavi širina obrobe za vse strani hkrati ali za vsako posebej:

širina roba: 5px 3px 5px 3px

Za trenutni odstavek bomo z uporabo pravila (širina obrobe: 1px 2px 3px 4px;) debelina zgornje obrobe znašala 1px, desne 2px, spodnje 3px in leve 4px;

Atribute sloga border-left-width , border-top-width , border-right-width in border-bottom-width lahko uporabite za nastavitev debeline leve, zgornje, desne oziroma spodnje strani obrobe :

Naslednji parameter je barva obrobe, s katero lahko upravljate barva okvirja:

barva obrobe: [barva | prozoren](1,4) | dedovati

Lastnost vam omogoča, da nastavite barvo okvirja za vse strani elementa hkrati ali samo za določene. Kot vrednost lahko uporabite metode za njihovo nastavitev, sprejete v html za barve: šestnajstiško kodo, ključne besede itd.:

p(širina obrobe: 2px; barva obrobe: rdeča)

Transparentna vrednost nastavi barvo prozorne obrobe, inherit pa podeduje nadrejeno vrednost. Če barva obrobe ni nastavljena, bo privzeto uporabljena tista, ki se uporablja za pisavo v danem elementu.

Atributi sloga border-left-color , border-top-color , border-right-color in border-bottom-color nastavijo barvo leve, zgornje, desne oziroma spodnje strani obrobe:

In zadnji parameter nastavi slog obrobe vrsta okvirja:

slog obrobe: (1,4) | dedovati

Vrsta okvirja je lahko določena za vse strani elementa hkrati ali samo za določene. Kot vrednosti je mogoče uporabiti več ključnih besed. Pogled bo odvisen od brskalnika, ki ga uporabljate, in debeline okvirja. Pomen nič se uporablja privzeto in ne prikaže okvirja, njegova debelina pa je nastavljena na nič. Skrita vrednost ima enak učinek. Končni okvir za preostale vrednosti, odvisno od debeline, je prikazan v spodnji tabeli:

Atributi border-left-style , border-top-style , border-right-style in border-bottom-style style nastavijo slog črt, ki bodo uporabljene za risanje leve, zgornje, desne in spodnje strani okvirja oziroma:

Tako kot pri možnostih roba in oblazinjenja ima obroba generična lastninska meja. Omogoča vam, da hkrati nastavite debelino, slog in barvo obrobe okoli elementa:

meja: | dedovati

Vrednosti so lahko v poljubnem vrstnem redu, ločene s presledki:

td (obroba: 1px polna rumena)

Če želite nastaviti obrobo samo na določenih straneh elementa, obstajajo lastnosti border-top, border-bottom, border-left, border-right, ki vam omogočajo nastavitev parametrov za zgornjo, spodnjo, levo in desno stran elementa. meje oz.

Ostaja samo povzeti:

za službo oblazinjenje uporabljati nepremičnino oblazinjenje;
za nastavitve marže obstaja pravilo marža;
možnosti okvirja nastavite z atributom meja.

Opažam, da vse te lastnosti css povečajo velikost elementa spletne strani. Če torej spremenimo debelino obrobe ali velikost oblazinjenja vsebnikov blokov, ki tvorijo zasnovo spletne strani, bomo morali ustrezno spremeniti velikost teh vsebnikov, sicer se lahko premaknejo in zasnova se pokvari.

To je vse, se vidimo kmalu!

Zgodi se, da moramo pri ustvarjanju elementa ali postavitve ustvariti vodoravni zamik, tako da je relativno drug glede na drugega. To so lahko bloki ali različni elementi, ali bolje rečeno, razdalja je tako, da je bila prvotno nastavljena med bloki, ki se nahajajo vodoravno. Obstajajo različni načini za ustvarjanje oblazinjenja na oblikovalskih elementih. Vendar pa se bomo zaradi združljivosti z več sodobnimi brskalniki tukaj dotaknili trenutne teme zamika besedila ali bloka na strani.

Lastnost določa, koliko vodoravnega prostora za besedilo naj prelomi pred začetkom prve vrstice besedilnega elementa. Razmik se izračuna od začetka od roba elementa in vsebnika za nivo bloka.

Ker je večina vsebine spletne strani v obliki besedila, je sposobnost oblikovanja tega besedila tako privlačno kot učinkovito pomembna veščina, če želite postati spletni oblikovalec. Za zamik opisa in odstavka bi bila najpogosteje uporabljena in priporočena metoda uporaba CSS. Tukaj boste prejeli različne primere, kako lahko CSS uporabite za besedilo in element oblazinjenja.

Nastavite oblazinjenje vrha s CSS

Za ustvarjanje zgornjega se uporablja oblazinjenje, potem seveda ne moremo brez lastnosti CSS, ker potrebujemo margin-top, to je vrednost, ki jo je mogoče nastaviti na različne načine, tako v px kot standardno na slikovnih pikah, em, % itd. na, da se vse dogaja v slogu CSS v merskih enotah.

Primer uporabe:

margin-block(
margin-top:50px;
}

Kaj se vidi na sliki:

Uporabite ga lahko tudi za spuščanje blokov, tukaj lahko uporabite lastnost, imenovano rob-levo tudi margin-desno in margin-bottom. Kjer preprosto določimo lastnost margine, kjer je možno na začetku nastaviti 4 parametre pod njo, tukaj bomo za koncept upoštevali smer urinega kazalca, kjer bomo začeli z zgornje strani in nadaljevali pod vsako od stranic.

rob: 20px 50px 30px 50px;

Tako bo delovalo marža: zgoraj desno spodaj levo:

Na CSS je tudi zamik od zgoraj

Zgodi se, da morate element vsebine poravnati navpično, to je glede na nadrejeni blok, tukaj je mogoče uporabiti druge lastnosti, kot je padding-top , ki ne, ali bolje rečeno, privzeto nastavi zamik navzgor. Če govorimo o podobnih lastnostih, ki jih lahko tudi zapišemo in nastavimo na podoben način, potem je tukaj marža v px, em, % in drugih enotah.

primer:

Padding-block(
oblazinjenje: 47px;
}

Poglejmo primer:

Zdaj lahko razmislimo o analogu nepremičnine marža in oblazinjenje, ki se uporablja za nastavitev zamikov na drugih straneh elementa bloka, vendar gre že ločeno: oblazinjenje-levo, oblazinjenje desno, oblazinjenje-dno. Kjer lahko takoj nastaviš razdaljo, ki jo potrebuješ, samo za vse strani, pa bo vse hkrati.

oblazinjenje: 10px 20px 40px 50px;

Tukaj lahko na začetku nastavite vrednost kot za marža začenši, kot razumete od zgoraj, potem pa gre vse v smeri urinega kazalca, to je na desni, spodaj, na levi itd.

Zdaj imate, odvisno od različne situacije, možnost, da zamaknete vrh slogov CSS, kjer uporabljamo lastnosti marža in oblazinjenje da je mogoče nastaviti potrebne elemente na strani vašega internetnega vira, kot ste načrtovali in morate narediti.

Spletni vir uporabniki ocenjujejo glede na njegovo zunanjo privlačnost. Zato tudi informativno uporabnega besedila morda ne boste prebrali, ker je slabe kakovosti. Zaključek - morate skrbno in skrbno pristopiti ne le k semantični vsebini strani spletnega mesta, temveč tudi k njeni vizualni predstavitvi. Pojav tehnologije CSS je razširil možnosti za ustvarjanje privlačnih člankov. Ena lastnost, namenjena lažjemu branju pisanja, je zamik besedila CSS.

Robovi in oblazinjenje: kakšna je razlika?

Preden začnete oblikovati besedilo, morate razumeti, kaj so robovi in zamiki. Kljub dejstvu, da so ti označevalni elementi v nekaterih primerih uporabniku videti enaki, obstajajo temeljne razlike med njimi:

polje je nastavljeno z lastnostjo oblazinjenje, zamik - marža;
rob je določen z vrzeljo med vsebino in robom bloka, zamik - med robovi sosednjih blokov;
Robovi se lahko upoštevajo pri velikosti elementa (širina in višina) ali pa tudi ne.

maržna lastnina

Torej, če želite nastaviti vodoravni ali navpični zamik besedila CSS, uporabite konstrukcijo marža. Ta lastnost velja za oznako določanje odstavka dokumenta. Najenostavneje je zapisano kot:

rob: 12px

Ta vrstica pomeni, da bo blok besedila (ali kateri koli drug blok) na vseh straneh zamaknjen za 12 slikovnih pik. Če želite povečati interval, na primer trikrat, je dovolj, da napišete:

rob: 36px

Kaj pa, če mora biti razmik med bloki na vsaki strani drugačen? Razvijalci spletnih strani uporabljajo več oblik zapisa:

rob: 11px 22px.
rob: 11px 22px 33px.
rob: 11px 22px 33px 44px.

V prvem primeru bo 11 slikovnih pik zamaknjenih od spodnje in zgornje meje bloka, 22 slikovnih pik pa bo zamaknjenih od strani bloka. Po drugi obliki zapisa bo med zgornjim robom bloka in vsebino 11 slikovnih pik, med spodnjim 33 slikovnih pik in ob straneh 22 slikovnih pik. V tretjem primeru bo oblazinjenje 11 slikovnih pik na vrhu, 22 slikovnih pik na desni, 33 slikovnih pik na dnu in 44 slikovnih pik na levi.

Možno je tudi beleženje razdalje do meje bloka samo na eni strani: rob-zgoraj, rob-spodaj, rob-levo, rob-desno. Po prevodu imen lastnosti v ruščino je enostavno uganiti njihov namen. Naslednji vnos na primer pravi, da bo desni odmik 22 slikovnih pik:

desni rob: 22 slikovnih pik

Za druge strani so razdalje okoli bloka enake vrednosti nadrejenega elementa.

Lastnina marža ima funkcijo, ki jo mora razvijalec upoštevati pri uporabi navpičnega zamika CSS. Intervali sosednjih elementov se ne seštevajo, ampak nalagajo drug na drugega. Na primer, naj ima eden od blokov rob-spodnji: 15px, in blok, ki meji nanj od spodaj zgornji rob: 35 slikovnih pik. Šolska aritmetika in zdrava pamet narekujeta, da bo skupna razdalja med njimi 50 slikovnih pik. V praksi temu ni tako. Blok z veliko vrednostjo nepremičnine marža"vsrka" svojega soseda. Posledično bo razmik med elementi 35 slikovnih pik.

"Rdeča črta

Pri oblikovanju dokumenta v urejevalniku besedil uporabniki raje nastavijo vsak nov odstavek z uporabo "rdeče" črte. S CSS je zamik besedila na levi strani preprost - uporabljena je konstrukcija zamik besedila. Napisano je takole:

zamik besedila: 11px.

To pomeni, da bo prva vrstica odstavka premaknjena od relativnega levega roba za 11 slikovnih pik. Da bo besedilo na spletni strani videti bolj kot dokument v urejevalniku, morate dodatno nastaviti, to je napisati:

zamik besedila: 11px;

poravnava besedila: poravnava.

Poleg slikovnih pik je pri opisu oznake dovoljeno uporabljati druge enote - palcev, točk, odstotkov. Blok naj ima zamik besedila CSS 10 %. Pri širini bloka 500 slikovnih pik bo rdeča črta 50 slikovnih pik (10 % od 500).

To lastnost je mogoče nastaviti na dedovati. Takšen zapis pravi, da blok uporablja podobno lastnost nadrejenega bloka.

text-indent: podeduj.

Presenetljivo ima lahko tudi negativne vrednosti! V tem primeru se oblikujejo tako imenovane robove, to pomeni, da glavno besedilo ostane na mestu, prva vrstica pa se premakne v levo za 22 slikovnih pik:

zamik besedila: -22px.

Da črke ne bi šle čez levo mejo brskalnika, poleg tega zamik besedila za nastavitev polja morate uporabiti konstrukcijo:

oblazinjenje-levo: 22px

Glavne lastnosti CSS, ki jih je treba upoštevati. In praksa jih bo pomagala popraviti. Tukaj je nekaj zadnjih nasvetov o tem, kako to, kar ste se naučili, uporabiti pri razvoju svojega spletnega mesta:

rdeča črta in zamik besedila sta različna pojma in za njuno določitev se uporabljajo različne lastnosti;
za navpične zamike matematična pravila ne veljajo - intervali se prekrivajo, element z največjo vrednostjo "zmaga";
Negativni zamik odstavka se uporablja za označevanje prve vrstice odstavka s sliko.

Za lepši prikaz elementov na spletni strani se uporabljajo zunanji in notranji zamiki v css, kar bomo sedaj analizirali na primerih.

Vsak element, ne glede na to, ali gre za odstavek, div, sliko ali videoposnetek, je neke vrste blok, v katerem lahko zamaknete notri z lastnostjo padding in zunaj z margino.

Te lastnosti za zamike so zapisane v css na ta način (odstavek je vzet kot primer):

Namesto oznake P napišete seveda svoj element, za katerega bodo uporabljene alineje.

Ne pozabite razumeti in zapomniti si, da je za parametre robov in oblazinjenja konstrukcija zamikov za vsako stran enaka.
To pomeni, da imamo v vsaki alinei 4 vrednosti:

Vrednosti zamika.

Prva vrednost: zamik od zgoraj;
Druga vrednost: zamik na desni;
Tretja vrednost: zamik od spodaj;
Četrta vrednost: vdolbino na levi strani.

V tem primeru sem naredil rob roba v css takole: zgoraj sem napisal 20px, levo in desno 10px (zaradi simetrije sta praviloma enaka), spodaj pa 30px.

In za oblazinjenje sem določil oblazinjenje: 10 slikovnih pik od zgoraj, levo in desno ter 14 slikovnih pik od spodaj.

Vrednost za oblazinjenje v lastnostih roba in oblazinjenja se lahko zmanjša, če imata enako količino.
Iz mojega primera bo skrajšani zapis že izgledal takole:

To pomeni, da ko ni zadnjega številskega vnosa, v tem primeru za zamik na levi, brskalnik samodejno nadomesti isto vrednost za zamik na levi kot vrednost na desni.
In v mojem primeru bosta zamika na desni in levi 10 slikovnih pik tako v robu kot v odmiku.

In če imate enake vrednosti za zgornji in spodnji rob (na primer: 16px ) ter enake vrednosti za levi in desni rob (na primer: 20px ), bo imel vnos še bolj skrajšan oblika:

V skladu s tem je za zamik css vnos enak temu.

Uporaba enojnih alinej: za vsako stran posebej.

Za določitev posameznega zamika se uporabljajo naslednje lastnosti ene vrednosti:

Lastnosti oblazinjenja za vsako stran.

zgornji rob: 3px; zunanja zgornja alineja;
rob-levo: 4px; zunanja leva alineja;
desni rob: 6px; zunanja desna alineja;
rob-spodaj: 10px; zunanji spodnji rob.

Na enak način so vnosi zapisani za notranje zamike, le da morate rob zamenjati z oblazinjenjem.

Na primer, imate vse zamike v css za vse img slike.

To pomeni (za pojasnilo), da ima rob naslednje vrednosti: zgoraj 10 slikovnih pik, levo in desno: po 20 slikovnih pik in spodaj 14 slikovnih pik.
In oblazinjenje je 6px na vseh 4 straneh.

Recimo, da se odločite, da boste na stran postavili še eno sliko, vendar želite zanjo spremeniti samo zgornji rob, ostale pa pustiti takšne, kot so. In za izpolnitev te naloge je dovolj, da registrirate razred za to sliko in dodate dodaten vnos v css.

Posledično bo slika, ki ste jo dodali z razredom verx, prevzela celotno oblazinjenje, določeno v css za oznako img, in spremenila samo zunanje oblazinjenje za zgornjo stran (v našem primeru: 40 slikovnih pik).

Poskušal sem podrobneje opisati zamike css, če pa imate kakršna koli vprašanja, jih postavite v komentarjih.

V tem članku bi vam rad povedal, kako pravilno urediti polja(oblazinjenje) in alineje(rob) v CSS.

Najprej se spomnimo definicije robov in oblazinjenja po specifikaciji W3C. V škatlastem modelu so robovi razdalja med vsebino (content) in robom bloka (border). Oblazinjenje pa je razdalja med robom bloka in robom sosednjega ali nadrejenega elementa.

Torej, če meja in ozadje elementa nista nastavljena, potem ni razlike, ali uporabiti lastnost padding ali margin za nastavitev zamikov, vendar pod pogojem, da širina (width) in višina (height) elementa nista in algoritem za izračun velikosti vsebine ni spremenjen z uporabo lastnosti velikosti polja.

V vsakem primeru ne pozabite, da so lahko robovi vključeni v širino ali višino elementa ali pa tudi ne. Zamiki so vedno nastavljeni zunaj elementa.

Zdaj pa poglejmo, kako pravilno razporediti robove in zamike med elementi. Za primer vzemimo naslednji blok.

To je blok novic. Sestavljen je iz naslova, seznama novic in povezave »Več novic«. Dajmo jim naslednja imena razredov: news_title, news__list in news__more-link.

Novice

Druge novice

Ker ima vsak od teh elementov enako levo in desno oblazinjenje, je bolje, da nastavite robove na nadrejenem bloku, namesto da nastavite levo in desno oblazinjenje za vsak element posebej.

Novice (oblazinjenje: 20px 25px;)

Tako, če je potrebno, spremenite vrednost polj na desni in levi, to bo treba storiti Na enem mestu. In ko dodate nov element znotraj bloka novic, bo že imel potrebne zamike na levi in desni.

Pogosto se zgodi, da imajo vsi elementi znotraj bloka enako oblazinjenje na levi in desni strani, razen enega, ki sploh ne bi smel imeti oblazinjenja, na primer zaradi ozadja. V tem primeru lahko za element nastavite negativno polnjenje. Potem vam ni treba odstraniti robov znotraj bloka za preostale elemente.

Zdaj morate nastaviti navpične zamike med elementi. Če želite to narediti, morate ugotoviti, kateri od elementov je obvezno. Očitno je, da blok novic ne more obstajati brez seznama novic, hkrati pa morda ne bo povezave »Druge novice«, naslov se lahko tudi odstrani, na primer ob spremembi dizajna.

S tem v mislih smo za naslov določili zamik od spodaj, za povezavo “Druge novice” pa zamik od zgoraj.

News__title ( margin-bottom: 10px; ) .news__more-link ( margin-top: 12px; )

Enak zunanji rezultat bi lahko dosegli z dodajanjem oblazinjenja na vrhu in dnu seznama novic.

News__list ( rob: 10px 0 12px 0; )

Zdaj morate nastaviti zamike med posameznimi novicami. Spet morate upoštevati, da se lahko število novic spreminja, na seznamu pa je lahko samo ena postavka.

Nastavite lahko za vsako novico razen za prvi zamik od zgoraj ali za vsako novico razen za zadnji zamik od spodaj. Prva možnost je prednostna, ker je bil psevdoizbirnik :first-child dodan v specifikaciji CSS 2.1 in ima širšo podporo kot psevdoizbirnik :last-child, ki je bil dodan samo v specifikaciji CSS različice 3.0.

News__list-item ( margin-top: 18px; ) .news__list-item:first-child ( margin-top: 0; )

Tako vam pravilna razporeditev robov in zamikov omogoča prilagodljivo spreminjanje videza katerega koli bloka, ne da bi spremenili sloge in brez kršitve dizajna. Najpomembneje je ugotoviti, kateri elementi bloka so glavni ( obvezno), in kateri neobvezno.

Včasih se ne moremo zanesti na potrebne elemente. Na primer, imamo pojavno okno, ki lahko prikaže nekaj naslova in besedila v notranjosti. Poleg tega v nekaterih primerih morda ni besedila, v nekaterih primerih pa morda ni naslova. To pomeni, da sta oba elementa neobvezna.

V tem primeru lahko uporabite naslednji način nastavitve zamikov.

Popup__header + .popup__text ( margin-top: 15px; )

Potem se bo zamik prikazal le, če sta uporabljena oba elementa. V primeru prikaza samo naslova ali samo besedila dodatnega zamika ne bo.

Strnjeni navpični robovi

Še en odtenek, za katerega vsi ne vedo, je povezan z navpičnimi zamiki med sosednjimi bloki. V definiciji vdolbine, ki sem jo dal zgoraj, piše, da je vdolbina razdalja med meje sedanji in sosednji blok. Torej, če postavimo dve škatli eno pod drugo in enemu od njiju damo 30 slikovnih pik spodnji odmik, drugemu pa 20 slikovnih pik zgornji odmik, oblazinjenje med njima ne bo 50 slikovnih pik, ampak 30 slikovnih pik.

To pomeni, da se zamiki prekrivajo, zamik med bloki pa bo enak največjemu zamiku in ne vsoti zamikov. Ta učinek se imenuje tudi "kolaps".

Upoštevajte, da se vodoravne alineje, za razliko od navpičnih, ne "zrušijo", ampak se seštejejo. Prav tako so povzeta polja (padding).

Ker vemo o "sesedanju" alinej, lahko to lastnost izkoristimo sebi v prid. Na primer, če moramo nastaviti zamike za naslove in besedilo znotraj članka, potem bomo za naslov prve ravni zamik od spodaj nastavili na 20px, za naslov druge ravni pa je zamik od zgoraj 20px in od spodaj 10px, in za vse odstavke bomo nastavili zamik od zgoraj na 10px.

h1 (rob-spodnji: 24px; ) h2 (rob-zgoraj: 24px; rob-spodnji: 12px; ) p (rob-zgoraj: 12px; )

Zdaj lahko naslov h2 postavite za naslov h1 in za odstavek. V nobenem primeru zgornji odmik ne bo presegel 24 slikovnih pik.

Splošna pravila

Če povzamem, bi rad navedel pravila, ki se jih držim pri urejanju robov in zamikov.

Če imajo sosednji elementi enako oblazinjenje, jih je bolje nastaviti na nadrejeni vsebnik in ne na elemente.
Pri nastavljanju zamikov med elementi morate upoštevati, ali je ta element obvezen ali neobvezen.
Za seznam elementov iste vrste - ne pozabite, da se lahko število elementov razlikuje.
Bodite pozorni na uporabo navpičnega oblazinjenja in uporabite to funkcijo, kjer bo uporabna.