margin tag v css kako narediti barvo. Robovi in ​​oblazinjenje v CSS. Zunanji rob z lastnostjo "rob" CSS

Naloga

Odstranite oblazinjenje okrog označenega ali oštevilčenega seznama.

rešitev

Uporabite ničelni slogovni rob in oblazinjenje za izbirnik UL ali OL, odvisno od vrste seznama, kot je prikazano v 1. primeru.

Primer 1: Zamik seznama

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

• Čeburaška
• Krokodil Gena
• Shapoklyak

---

Rezultat tega primera je prikazan na sl. 1.

riž. 1. Seznam brez navpičnih in vodoravnih alinej

Upoštevajte, da oznake seznama, ki se pojavijo ob levem robu spletne strani, izginejo. Če želite odstraniti samo zgornje in spodnje oblazinjenje, ne da bi seznam premaknili v levo, uporabite lastnosti margin-top in margin-bottom (2. primer).

Primer 2: Zamik seznama

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

• Čeburaška
• Krokodil Gena
• Shapoklyak

---

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:

1. rob: 11px 22px.
2. rob: 11px 22px 33px.
3. 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.

Bločna postavitev se pogosto uporablja pri ustvarjanju spletnega mesta ali bloga. Zaradi tega je pogosto potrebno bloke zamikati. Iz tega razloga približno kako narediti zamik v css podrobno v tej lekciji. Za brskalnik je vsaka oznaka vsebnik z vsebino, oblazinjenjem, robovi in ​​obrobo. V tej lekciji se bomo naučili narediti notranje in zunanje zamike, upoštevali njihove glavne parametre.

Spodnja slika jasno prikazuje parametre zamika bloka:

Kot lahko vidite, je zamik mogoče narediti v štirih smereh: zgornji zamik (zgoraj), spodnji zamik (spodaj), levi zamik (levo) in desni zamik (desno). Enote so lahko slikovne pike, odstotki in druge enote CSS – izvedite več o njih. Lekcija uporablja slikovne pike.

Oblazinjenje blokov

Lastnost je odgovorna za notranje oblazinjenje v CSS. oblazinjenje. Torej, poglejmo primer nastavitve zamikov za blok:

oblazinjenje: 5px; /*zgornje oblazinjenje*/ oblazinjenje-levo: 8px; /*levo oblazinjenje*/ oblazinjenje-desno: 8px; /*desno oblazinjenje*/ padding-bottom: 5px; /*oblazinjenje na dnu*/

V tem primeru je oblazinjenje nastavljeno ločeno za vsako stran bloka. Poleg tega obstaja več načinov za nastavitev zamikov v CSS:

rob: 5px 8px 5px 8px; /*zgornji, desni, spodnji, levi rob*/ margin: 5px 8px 5px; /*opisuje zgornji, levi, desni, spodnji rob*/ rob: 5px 8px; /*opisuje zgornji in spodnji, desni in levi rob*/ rob: 7px; /*opisuje vse 7px oblazinjenje*/

Prvo in zadnjo metodo si je lažje zapomniti. V prvem primeru so zamiki nastavljeni v smeri urinega kazalca (zgoraj, desno, spodaj, levo) - določimo lahko poljubno vrednost zamika, v drugem primeru bodo zamiki na vseh straneh enaki.

Robovi bloka

Lastnost je odgovorna za robove v CSS marža. Primeri robov v CSS:

zgornji rob: 5px; /*zgornji rob*/ levi rob: 10px; /*levi rob*/ margin-desno: 10px; /*desni rob*/ margin-bottom: 5px; /*spodnji rob*/

oblazinjenje: 5px 10px 5px 10px; /*zgornji, desni, spodnji, levi robovi*/ oblazinjenje: 5px 10px 5px; /*opisuje oblazinjenje zgoraj, levo, desno, spodaj*/ oblazinjenje: 5px 10px; /*opisuje zgornji in spodnji, desni in levi oblazinjen*/ oblazinjenje: 7px; /*opisuje vse 7px robove*/

torej kako narediti zamik v css- vprašanje ni težko, a zelo pomembno. Za boljše razumevanje zgoraj opisanih informacij ne pozabite, da obstajata dve lastnosti: oblazinjenje – notranji robovi in ​​rob – zunanji robovi. Poleg tega, kot že veste, obstaja več načinov za nastavitev zamikov, lahko jih uporabite.

Opis

Lastnost CSS margin-top nastavi zgornji rob elementa. Oblazinjenje je razdalja od zunanjega roba zgornje obrobe trenutnega elementa do notranje obrobe njegovega nadrejenega elementa ali do obrobe elementa nad njim. Upoštevajte, da imajo lahko elementi v vrstici (display : inline;) le robove na levi in ​​desni strani.

Oblazinjenje zgornjega roba je mogoče določiti v slikovnih pikah (px), odstotkih (%) ali drugih enotah CSS. Vrednost je lahko pozitivna ali negativna.

Opomba: spodnje ali zgornje oblazinjenje podrejenega elementa lahko vpliva na skupno višino nadrejenega elementa, če nima fiksne velikosti višine.

Združevanje polj

1. Polja sestrskih elementov, ki se nahajajo eno pod drugim in se nahajajo v dokumentnem toku, so združena v en skupni element. Višina dobljenega roba je enaka višini večjega od obeh robov, na primer: rob zgornjega elementa (margin-bottom) je 10px, rob spodnjega elementa (margin-top) pa 20px , bo v tem primeru posamezen rob visok 20 slikovnih pik.
2. Robovi nadrejenega in podrejenega elementa, ki sta v toku dokumenta, se pojavijo, ko nadrejeni element nima ničesar, kar bi ločilo njegov rob od podrejenega roba (obroba, oblazinjenje ali vstavljena vsebina). Prav tako se polja ne bodo združila, če ima lastnost prelivanja nadrejenega elementa nastavljeno na hidden ali auto. Prednost te metode je, da se velikost nadrejenega elementa ne poveča.