Zapomnimo si za vedno: kakšna je razlika med robom in oblazinjenjem. Padding, Margin and Border - v CSS nastavimo notranje in zunanje oblazinjenja ter okvirje za vse strani (zgoraj, spodaj, levo, desno) oblazinjenje sintakse CSS

Ta lastnost ima lahko eno do štiri vrednosti.

Na sliki svetlo siva barva označuje območje, za katerega je odgovorna lastnost paddinga:

1. Ko določite štiri vrednosti(5px 10px 15px 20px) - vrstni red odmikov bo naslednji: Vrh(5 slikovnih pik) - Prav(10 slikovnih pik) - dno(15 slikovnih pik) - levo(20 slikovnih pik). Če si želite zapomniti vrstni red alinej v eni deklaraciji, lahko uporabite angleško besedo TR ou BL e (kje T- vrh, R-prav, B- dno, L- levo).


2. Ko določite tri pomene(5px 10px 15px) - vrstni red odmikov bo naslednji: Vrh(5 slikovnih pik) - Desno levo(10 slikovnih pik) - dno(15 slikovnih pik).


3. Ko določite dve vrednosti(5px 10px) – prva vrednost (5px) bo nastavila velikost odmika od vrha in dna vsebine elementa, druga vrednost (10px) pa bo nastavila odmik levo in desno od vsebine elementa.


4. Ko določite eno vrednost(5px) - oblazinjenje na vseh straneh bo enake velikosti - 5px.

Podpora za brskalnik

Lastnina			Opera		IExplorer	rob
oblazinjenje	1.0	1.0	3.5	1.0	4.0	12.0

Sintaksa CSS:

oblazinjenje: "dolžina | začetna | podeduj" ;

sintaksa JavaScript:

object.style.padding = "5px"

Vrednosti lastnosti

različica CSS

CSS1

Podedovano

št.

Animirano

da.

Primer uporabe

vir: rob ali oblazinjenje?
Filip Šporer.
prevod: vl49.

Kdaj je bolje uporabiti robove in kdaj uporabiti oblazinjenje za namene oblikovanja in ali je to pomembno?

Zelo dolgo sem se trudil iskati ustrezne odgovore. In šele po tem, ko sem napisal veliko grozljive, nečitljive kode CSS, ki jo spremljajo različni stranski učinki, sem lahko samozavestno rekel, da sem našel temeljna železna pravila glede zgoraj naštetih vprašanj.

Za ponazoritev si oglejmo tipično situacijo, ki je verjetno znana vsem razvijalcem uporabniškega vmesnika v letu 2017. Imamo najpreprostejšo predlogo kartice.

V tem primeru lahko ločimo dve vrsti intervalov:

med kartami (modra);

med karticami in njihovo posodo (zelena);

Pri tem je zelo pomembno razumeti, da imamo opravka z dvema različnima konceptoma, ki pri povezovanju ne bi smeli biti medsebojno povezani. Se pravi, če moram spremeniti razdaljo med karticami in njihovim vsebnikom, na primer do 24 slikovnih pik, potem to nikakor ne bi smelo vplivati ​​na razmik med samimi karticami.

Implementacija primera s CSS?

Obstaja dobesedno na tisoče načinov, kako ustvariti takšno predlogo z uporabo robov in oblazinjenja, vendar bi vam rad predstavil enega od njih, ki prikazuje pravilno uporabo lastnosti robov in paddinga. Poleg tega vam ta metoda omogoča, da pozneje dodate druge kartice.

Vsebnik (
oblazinjenje: 16px
}
.card + .card(
rob: 0 0 0 8px;
}

Samo 2 selektorja in 2 pravila.

Kakšna je funkcija znaka plus?

Simbol + predstavlja sosednji izbirnik. Kaže samo na element takoj za elementom, ki je določen pred tem izbirnikom.

Kot lahko vidite na zgornji sliki, bo v našem primeru ta izbirnik izbral vsako kartico pred vsako drugo kartico. Tako lahko s sosednjim izbirnikom nastavimo levi rob za vsako kartico razen za prvo.

To pomeni, da imamo možnost dodati poljubno število kartic, ki jih potrebujemo, pri čemer bo razdalja med njimi vedno osem slikovnih pik.

Vse deluje v redu, dokler ne moramo poleg kartic postaviti še kaj drugega kot kartico. No, recimo gumb "Dodaj kartico" ("Dodaj kartico"):

Glede na delček CSS, ki ga že imamo, novemu elementu, ki predstavlja gumb, verjetno ne bi dali razreda .card, saj ne gre za kartico. Kako biti? Ali se splača ustvariti dodatno ime razreda .add-card, ki vsebuje enako pravilo z lastnostjo roba kot razred .card? Ne, obstaja boljša rešitev.

Lobotomizirana sova *++.

In kako izgleda. Kljub smešni asociaciji se ta metoda odlično obnese in jo uporabljam ves čas, odkar sem izvedel zanjo. Torej, čemu je vse to? Tukaj si oglejte ustrezno kodo CSS:

Vsebnik (
oblazinjenje: 16px
}
/* No, ste prepoznali lobotomizirano sovo? */
.container > * + * (
rob: 0 0 0 8px;
}

Kot se verjetno spomnite, je prejšnji izbirnik veljal za katero koli kartico, pred katero je bila druga kartica. Zdaj lahko z njegovo pomočjo formatiramo vsak element, ki je neposredno pred katerim koli drugim elementom, vključno z gumbom, seveda.

Končno.

Iskreno upam, da vam je tukaj predstavljeno gradivo pomagalo ugotoviti, kdaj uporabiti oblazinjenje za ločevanje vsebine v vsebniku in kdaj uporabiti robove.

Za zaključek bi vam rad predstavil projekt peresa, ki prikazuje zgornje primere, pa tudi dve pravili, ki sta bili preverjeni z lastnimi izkušnjami. Torej uporabljamo:

oblazinjenje- za prostore med posodo in njeno vsebino.

marža- za reže med elementi v notranjosti posode.

Ogledov objave: 427

Ta vodnik vam bo pomagal bolje razumeti lastnosti CSS, kot so obroba, oblazinjenje in rob. Te lastnosti so razvijalcem v veliko pomoč pri pozicioniranju elementov na strani glede na postavitev.

Ustvarimo div in mu damo lastnosti roba, paddinga in roba.

Lastnost oblazinjenja

Lastnost CSS padding definira razdaljo med obrobo elementa in njegovo vsebino. Lahko ga definirate takole:

• padding-top: 10px;
• padding-right: 10px;
• padding-bottom: 10px
• padding-left: 10px

Ta vnos se lahko skrajša:

• padding:25px 50px 75px 100px;
  • zgornjih 25 slikovnih pik
  • desno 50px
  • spodaj 75 slikovnih pik
  • levo 100px
• padding:25px 50px 75px;
  • zgornjih 25 slikovnih pik
  • desno in levo 50px
  • spodaj 75 slikovnih pik
• padding: 25px 50px;
  • zgoraj in spodaj 25px
  • desno in levo 50px
• padding:25px;
  • vse 25px

Opomba: vrednost paddinga je dodana širini elementa in je odvisna od ozadja elementa.

Z drugimi besedami, imamo element div z razredom div-1:

Div.div-1(širina:150px; oblazinjenje: 25px;)

Brskalnik bo širini elementa dodal levo in desno oblazinjenje. Kot rezultat bomo dobili element s širino 200px.

Obmejna lastnina

Lastnost obrobe CSS vam omogoča, da določite slog in barvo obrobe elementa.

širina obrobe

Lastnost border-width se uporablja za določanje širine obrobe. Širina je podana v slikovnih pikah ali z uporabo ene od vnaprej določenih vrednosti: tanka (tanka), srednja (srednja) ali debela (debela).

barva obrobe

Lastnost border-color se uporablja za določanje barve obrobe. Barvo je mogoče nastaviti na naslednje načine:

• ime - ime barve, na primer "rdeča"
• RGB - definira vrednost RGB, na primer "rgb(255,0,0)"
• Hex - definira hex vrednost, na primer "#ff0000"

obrobni slog

• pikčasto: Določa natančno mejo
• črtkano: določa pikčasto obrobo
• trdna: Določa debelo obrobo
• dvojno: Določa dve meji. Razdalja med njima je odvisna od vrednosti obrobe
• utor: Definira tridimenzionalno zamaknjeno obrobo
• greben: določa 3D dvignjeno obrobo
• vložek: Določi obrobo, tako da se blok niha zamaknjeno
• na začetku: Določi obrobo, tako da blok niha konveksno

Lastnosti obrobe elementa lahko zapišete na kratko:

Div.div-2( obroba:1px trdno #ccc; )

Lastnost marže

Lastnost roba CSS definira razmik okoli elementa. Rob sprosti nekaj prostora okoli elementa (zunaj meje). Rob nima barve ozadja in vedno ostane pregleden.

Vrednosti robov lahko določite za element, kot je ta:

• margin-top:100px;
• margin-bottom:100px;
• margin-right:50px;
• margin-left:50px;

Ta vnos se lahko skrajša:

• margin:25px 50px 75px 100px;
  • zgornji rob 25px
  • desni rob 50px
  • spodnji rob 75px
  • levi rob 100px
• rob:25px 50px 75px;
  • zgornji rob 25px
  • desni in levi rob 50px
  • spodnji rob 75px
• rob:25px 50px;
  • zgornji in spodnji rob 25px
  • desni in levi rob 50px
• rob: 25px;
  • vsi štirje robovi 25px

Z uporabo privzetih vrednosti robov lahko okvir centrirate vodoravno.

V prejšnjem poglavju smo omenili lastnosti CSS, kot sta rob (polje) in padding (zamik). Zdaj se jih bomo podrobneje posvetili in razmislili, kako se med seboj razlikujejo in kakšne lastnosti imajo.

Vrzeli med elementi lahko ustvarite na oba načina, toda če je oblazinjenje zamik od vsebine do roba bloka, je rob razdalja od enega bloka do drugega, prostor med bloki. Posnetek zaslona prikazuje dober primer:

Oblazinjenje loči vsebino od obrobe bloka, rob pa ustvarja vrzeli med bloki

Kot lahko vidite, so robovi in ​​oblazinjenje CSS različni, čeprav je včasih brez pogleda na kodo nemogoče ugotoviti, katera lastnost se uporablja za nastavitev razdalje. To se zgodi, ko za blok vsebine ni okvirja ali ozadja.

Če želite nastaviti rob ali oblazinjenje v CSS na vsaki strani elementa, obstajajo naslednje lastnosti:

alineje:

• oblazinjenje vrh: pomen;
• padding-desno: pomen;
• padding-bottom: pomen;
• padding-left: pomen;

Polja:

• margin-top: pomen;
• rob-desno: pomen;
• rob-dno: pomen;
• rob-levo: pomen;

Vrednosti lahko podate v kateri koli enoti CSS - px, em, % itd. Primer: margin-top: 15px.

Obstaja tudi zelo priročna stvar, kot je Okrajšava CSS za rob in oblazinjenje. Če morate nastaviti robove ali oblazinjenje za vse štiri strani elementa, ni treba pisati lastnosti za vsako stran posebej. Vse je poenostavljeno: za rob in oblazinjenje lahko naenkrat podate 1, 2, 3 ali 4 vrednosti. Način porazdelitve nastavitev je odvisen od števila vrednosti:

• 4 vrednosti: padding je nastavljen za vse strani elementa v naslednjem vrstnem redu: zgoraj, desno, spodaj, levo: padding: 2px 4px 5px 10px;
• 3 vrednosti: padding je nastavljen najprej za zgornjo stran, nato za levo in desno in nato za spodnjo: padding: 3px 6px 9px;
• 2 vrednosti: padding je nastavljen najprej hkrati z zgornje in spodnje strani, nato pa - hkrati za levo in desno stran: padding: 6px 12px;
• 1 vrednost: nastavite enako oblazinjenje za vse strani elementa: padding: 3px;

Ista pravila veljajo za lastnost marže CSS. Upoštevajte, da lahko uporabite tudi negativne vrednosti za rob (na primer -3px), kar je včasih lahko zelo koristno.

padajoča marža

Predstavljajte si situacijo: dva elementa blokov sta drug na drugem in imata robove. Zgornji blok je nastavljen na margin: 60px, spodnji blok pa na margin: 30px. Logično bi bilo domnevati, da bi se oba robova dveh elementov preprosto dotaknila in posledično bi bila vrzel med blokoma 90 slikovnih pik.

Vendar so stvari drugačne. Pravzaprav se v takšni situaciji pokaže učinek, ki se imenuje kolaps, ko iz dveh sosednjih polj elementa izberemo največje po velikosti. V našem primeru bo nastala vrzel med elementi 60 slikovnih pik.

Razdalja med bloki je enaka večji od vrednosti

Strnjeni robovi delujejo samo za zgornje in spodnje robove elementov in se ne uporabljajo za robove na desni in levi strani. Končna vrednost vrzeli se izračuna v različnih situacijah na različne načine:

• Ko sta obe vrednosti marže pozitivni, bo končna velikost marže večja.
• Če je ena od vrednosti negativna, je treba za izračun velikosti polja pridobiti vsoto vrednosti. Na primer, pri vrednostih 20px in -18px bo velikost polja:
  20 + (-18) = 20 - 18 = 2 slikovni piki.
• Če sta obe vrednosti negativni, se modul teh številk primerja in izbere se število z večjim modulom (torej manjše od negativnih števil). Primer: želite primerjati vrednosti polj -6px in -8px. Modula primerjanih številk sta 6 oziroma 8. Iz tega sledi, da je 6-8. Končna velikost polja je -8 slikovnih pik.
• V primeru, ko so vrednosti določene v različnih enotah CSS, se zmanjšajo na eno, nato se primerjajo in izbere se večja vrednost.
• Velikost roba za podrejene elemente je še bolj zanimiva: če ima otrok večji rob od nadrejenega, ima prednost njemu. V tem primeru bodo velikosti zgornjega in spodnjega roba starša enake kot nastavljene za otroka. V tem primeru ne bo razdalje med staršem in otrokom.