Zdroj: okraj alebo výplň?
Filip Šporer.
preklad: vl49.

Kedy je lepšie použiť okraje a kedy padding na účely formátovania a záleží na tom?

Veľmi dlho som sa snažil nájsť vhodné odpovede. A až po napísaní množstva hrozného, ​​nečitateľného kódu CSS, sprevádzaného rôznymi vedľajšími účinkami, som mohol s istotou povedať, že som našiel základné pevné pravidlá týkajúce sa vyššie uvedených problémov.

Pre prehľadnosť sa obráťme na typickú situáciu, ktorú s najväčšou pravdepodobnosťou pozná každý vývojár. užívateľské rozhranie v roku 2017. Máme najjednoduchšiu šablónu karty.

AT tento príklad Existujú dva typy intervalov:

medzi kartami (modrá);

medzi kartami a ich schránkou (zelená);

Tu je veľmi dôležité pochopiť, že máme do činenia s dvoma odlišnými pojmami, ktoré by pri prepájaní nemali byť prepojené. To znamená, že ak potrebujem zmeniť vzdialenosť medzi kartami a ich kontajnerom, napríklad až na 24 pixelov, tak by to nemalo nijako ovplyvniť rozostupy medzi kartami samotnými.

Implementujete príklad pomocou CSS?

Existujú doslova tisíce spôsobov, ako vytvoriť takúto šablónu pomocou okrajov a výplne, ale rád by som vám predstavil jeden z nich, ktorý demonštruje správne použitie vlastností okraja a výplne. Okrem toho vám táto metóda umožňuje pridať ďalšie karty neskôr.

Kontajner(
výplň: 16px
}
.karta + .karta(
okraj: 0 0 0 8px;
}

Len 2 selektory a 2 pravidlá.

Akú funkciu má znamienko plus?

Symbol + predstavuje susedný volič. Ukazuje iba na prvok bezprostredne nasledujúci za prvkom zadaným pred týmto selektorom.

Ako môžete vidieť na obrázku vyššie, v našom prípade bude tento selektor vyberať každej karte predchádza každá druhá karta. So susedným voličom teda môžeme nastaviť ľavý okraj pre každú kartu okrem prvej.

To znamená, že máme možnosť pridať ľubovoľný počet kariet, ktoré potrebujeme, pričom vzdialenosť medzi nimi bude vždy osem pixelov.

Všetko funguje dobre, kým nepotrebujeme priložiť ku kartám niečo iné ako kartu. No, povedzme tlačidlo "Pridať kartu" ("Pridať kartu"):

Na základe úryvku CSS, ktorý už máme, by sme zrejme novému prvku, ktorý predstavuje tlačidlo, nepriradili triedu .card, keďže nejde o kartu. Ako byť? Oplatí sa vytvoriť dodatočný názov triedy .add-card , ktorý obsahuje rovnaké pravidlo s vlastnosťou margin ako trieda .card? Nie, existuje lepšie riešenie.

Lobotomizovaná sova **+* .

A ako to vyzerá. Napriek vtipnej asociácii táto metóda funguje skvele a odkedy som sa o nej dozvedela, používam ju neustále. Takže, na čo to všetko je? Tu je pohľad na príslušný kód CSS:

Kontajner(
výplň: 16px
}
/* No, spoznali ste lobotomizovanú sovu? */
.container > * + * (
okraj: 0 0 0 8px;
}

Ako si iste pamätáte, predchádzajúci selektor sa použil na akúkoľvek kartu, ktorej predchádzala iná karta. Teraz s jeho pomocou môžeme formátovať každému prvku bezprostredne predchádza akýkoľvek iný prvok, samozrejme vrátane tlačidla.

Nakoniec.

Úprimne dúfam, že vám tu prezentovaný materiál pomohol zistiť, kedy použiť výplň na oddelenie obsahu v kontajneri a kedy použiť okraje.

Na záver by som vám rád predložil na zváženie projekt pera, ktorý demonštruje vyššie uvedené príklady, ako aj dve pravidlá overené mojou vlastnou skúsenosťou. Takže používame:

vypchávka- pre medzery medzi nádobou a jej obsahom.

marža- pre medzery medzi prvkami vo vnútri nádoby.

Zobrazenia príspevku: 427

Dobrý deň, milí čitatelia blogu. Dnes chcem pokračovať v téme štúdia a zvážiť pravidlá štýlu, ktoré vám umožňujú nastaviť zarážky a okraje Html prvky: okraj, okraj a výplň.

Predtým sme stihli naštudovať pomerne jednoduché vlastnosti, ktoré ovládali fonty (), text () a preskúmali model

Áno, podarilo sa nám zvážiť aj princípy používania do všetkých detailov (roztiahnuté do niekoľkých článkov). Teraz je čas prejsť na pravidlá, ktoré tvoria základ pre vytváranie dokumentov (webových stránok) a začneme s blokovým modelom (vzťah Html prvkov).

Vo všeobecnosti som už písal a moderné, no, ale dnes budú čisté špecifiká. Ak si chcete prečítať predchádzajúce publikácie na túto tému, ste vítaní.

CSS box model - výplň, okraj a okraj

Po tretie, môžu sa použiť percentá. Z čoho sa považujú? Ukazuje sa, že od šírky kontajnera(teda z oblasti obsahu nadradený prvok). Navyše to neplatí len pre okraj vpravo a vľavo, čo by bolo logické, ale pre okraj hore a dole sa percentá vypočítajú zo šírky (nie výšky) kontajnera.

Pri nastavovaní rozmerových hodnôt treba poznamenať, že Margin môže byť aj negatívny. Tie. pri nastavení kladnej hodnoty vonkajšieho odsadenia posunieme susedný prvok na určenú vzdialenosť a ak je zadaná záporná hodnota, susedný blok jednoducho prejde na ten, pre ktorý sme nastavili toto záporné odsadenie. A to sa v CSS veľmi často používa.

Je samozrejmé, že existuje prefabrikované pravidlo CSS Margin, ktoré v mnohých prípadoch umožňuje zmenšiť veľkosť kódu používaného na nastavenie požadovaných okrajov. Poradie hodnôt v ňom je prísne regulované (sú napísané cez znak medzery) a musí zodpovedať vzoru:

Tie. enumerácia začína zhora (hore) a pokračuje v smere hodinových ručičiek až po koniec kruhu s pravou zarážkou (vpravo). Môže to vyzerať nejako takto:

Okraj: 20px 10px 40px 30px;

A to bude znamenať, že prehliadač by mal odsadiť 20 pixelov nad naším blokom, 10 pixelov vpravo, 40 pixelov dole a 30 pixelov vľavo. tento záznam by bol ekvivalentný:

Skrátenie kódu CSS je viditeľné voľným okom. Ale to nie je limit. Je úplne prijateľné použiť nielen štyri, ale aj tri, dve a dokonca len jednu hodnotu v prefabrikovanom pravidle. Čo ďalej pomôže znížiť veľkosť kódu. Počet hodnôt však bude možné znížiť iba v určitých prípadoch:

1. Ak je ľavý a pravý okraj rovnaký, napríklad: margin:20px 30px 40px 30px;

   To posledné možno vynechať:

   Okraj:20px 30px 40px;

   Tieto dve položky pravidiel kolekcie robia to isté. Preto, ak vidíte položku s tromi hodnotami v Margin, potom hodnotu štvrtej (vpravo) môžete vidieť v druhej (vľavo).

   V prípade rovnakých odsadení zhora a zdola takýto trik už nebude fungovať, pretože logicky je možné zmenšiť štruktúru prefabrikovaného vstupu pravidla, iba odrezanie duplicitných hodnôt od jeho konca(a hodnota spodnej zarážky bude predposledná).

2. Ak okrem rovnosti okrajov vľavo a vpravo existuje aj rovnosť ich hodnôt nad a pod: margin:20px 30px 20px 30px;

   alebo, čo je rovnaké (na základe bodu 1):

   Okraj:20px 30px 20px;

   Že takéto prefabrikované pravidlo možno napísať len s dvoma hodnotami, pričom posledná, ktorá sa zhoduje s prvou, sa zahodí:

   Okraj:20px 30px; V tomto prípade prvá hodnota popisuje vertikálne okraje a druhá popisuje horizontálne okraje.

3. A nakoniec, ak sú všetky hodnoty v precastovom pravidle rovnaké: margin:20px 20px 20px 20px;

   alebo, čo je rovnaké (na základe bodu 2):

   Okraj:20px 20px;

   To sa dá použiť najkratší typ záznamu(zahodí sa posledná hodnota, ktorá sa zhoduje s prvou):

   Okraj:20px; Čo bude znamenať rovnakú vonkajšiu zarážku na všetkých stranách nášho prvku Html.

Keď už hovoríme o maržiach, stojí za zmienku taká schéma, ako je "margin-collapse" alebo inými slovami „zrútenie marže“. Stručne povedané, podstata tohto javu je nasledovná.

Ak máme dva bloky umiestnené pod sebou (okraje sa môžu zbaliť iba vertikálne) a oba majú opačné okraje (napríklad spodný pre horný prvok a horný okraj pre spodný), potom väčšia hodnota okraja absorbuje menšie jeden.

Napríklad, ak je horný blok nastavený na:

Margin:20px 20px 200px 20px;

A pre dno:

Margin: 100px 20px 20px 20px;

Potom spodný okraj horného bloku (200px) pohltí horný okraj spodného bloku (100px, a aj keď sa bude rovnať 199px, nič sa nezmení) a výsledná vonkajšia zarážka medzi týmito dvoma blokmi bude stále 200px. Tie. Do úvahy sa berie len ten väčší. modulo Margin a nijako sa nesčítava s opačnou hodnotou vertikálne susediaceho prvku.

Toto je taký trik, ktorý funguje výlučne vertikálne a horizontálne sa opačné veľkosti Margin jednoducho pridajú k sebe. Ale to sa týka iba okrajov s rovnakým znamienkom, ale ak sú s rôznymi znamienkami, ich čísla sa jednoducho sčítajú a bloky budú od seba oddelené výslednou hodnotou.

Napríklad v tomto prípade:

Horný okraj: 20px 20px -20px 20px; spodný okraj:10px 20px 20px 20px;

Výsledná výplň medzi blokmi bude -10px, t.j. spodných 10 pixelov bude prechádzať cez horný prvok HTML.

Ďalšou vlastnosťou použitia pravidla Margin v CSS je zadaná hodnota vertikálne pre vložené prvky sa ignoruje. Opýtaním sa:

Okraj:20px;

Napríklad pre , čo je vložený prvok, v skutočnosti uvidíme iba vodorovnú výplň a žiadne vertikálne zmeny nenastanú.

Keď sa pozriem trochu dopredu, poviem, že odsadenie pre vložené značky vertikálne bude fungovať, ale zvýšené odsadenie neovplyvní jeho všeobecnú polohu vo vzťahu k ostatným susedným prvkom.

V prípade tagu bloku (nadpisy, odseky) by vertikálne zväčšené Padding posunulo tento prvok voči ostatným susedným blokom.

Rám (Border), respektíve jeho šírka, tiež nebude môcť vertikálne posúvať ostatné susedné bloky z inline tagu. Pre inline prvky je pohyb možný len jedným smerom - horizontálne a to je všetko.

Padding and border - padding and borders

Prejdime teraz k nastaveniu paddingu pomocou pravidla Padding a uvidíme, aké hodnoty môže nadobudnúť:

Ako vidíte, nie je tu žiadna zmienka o Auto a ani toto pravidlo CSS nepovoľuje záporné hodnoty (môžu byť iba kladné - od nuly a vyššie). Tie. pomocou Paddingu nie je možné obsah vytlačiť z rámu. Maximálne, čo sa dá urobiť, je priblížiť obsah k rámu.

Percentá v ňom sa počítajú rovnakým spôsobom ako v Margin - vzhľadom na šírku kontajnera (oblasť obsahu nadradeného prvku), v ktorej je náš prvok uzavretý. Pravidlo prefabrikovanej výplne v Css je vytvorený a riadi sa rovnakými zákonmi, ako je uvedené vyššie:

Padding:20px 10px 40px 30px;

V tomto pravidle, počnúc zhora, popisujeme všetky štyri strany. Ak v ňom potrebujete niečo zmenšiť (až tri, dve alebo aj jednu hodnotu), potom pri vonkajších odsadeniach budete musieť použiť princípy redukcie popísané tesne vyššie, ktoré budú presne s rovnakým úspechom fungovať pri vnútorných.

A posledná vec, ktorú by som dnes chcel zvážiť, je rámec, ktorý sa používa Hranica. Majú tri typy parametrov:

1. Border-width - nastavuje šírku okraja
2. Border-color – nastavuje jeho farbu
3. Border-style - typ rámu alebo typu čiary, s ktorou sa bude kresliť

Všetky tri tieto pravidlá CSS majú platnú množinu hodnôt:

Šírka čiary okraja ( hraničná šírka) je možné špecifikovať pomocou čísel v Em, Ex alebo Px a slovami:

1. Tenká - tenká čiara;
2. Stredná - stredná (táto hodnota sa používa štandardne);
3. Hustý - hustý.

border-width:2px;

Ako hodnotu pre farbu okraja ( border-color) na ich špecifikáciu môžete použiť akceptované metódy (hexadecimálny kód, slová atď.):

farba okraja:červená;

V predvolenom nastavení, ak farba okraja nie je explicitne nastavená, použije sa farba použitá pre písmo vnútri daného prvku.
Vlastnosť CSS v štýle Border vám umožňuje nastaviť typ ohraničenia slovami:

1. Žiadne – bez okrajov (predvolené)
2. Bodkovaná - čiara je nakreslená bodkami
3. Prerušované - bodkované
4. Plná - plná čiara
5. Dvojitý - dvojitý riadok
6. Drážka - členitý rám
7. Hrebeň – vydutý
8. Vklad a začiatok – hry s tieňmi

Prirodzene, keďže každý blok má štyri strany, dá sa použiť ako všeobecné pravidlá a samostatne pre každú zo strán:

To isté bude platiť pre Prefabrikovaná hranica pravidiel- dá sa písať ako pre všetky strany súčasne (Border), tak pre každú zo strán samostatne (Border-top, left, bottom a right). Poradie hodnôt nie je dôležité:

Orámovanie: 1px plná červená;

Ak niečo vynecháte, použije sa namiesto toho predvolená hodnota.

Veľa šťastia! Uvidíme sa čoskoro na stránkach blogu

Možno vás bude zaujímať

Výška, šírka a pretečenie – CSS pravidlá pre popis oblasti obsahu v blokovom rozložení
Pozícia (absolútna, relatívna a pevná) – spôsoby umiestnenia prvkov Html v CSS (pravidlá vľavo, vpravo, hore a dole) Rôzny dizajn do interiéru a vonkajšie odkazy cez CSS
Float and clear in CSS - block layout tools
Display (block, none, inline) in CSS – nastavenie typu zobrazenia Html prvkov na webovej stránke
Štýl zoznamu (typ, obrázok, pozícia) – pravidlá CSS na prispôsobenie vzhľad zoznamy v html kód
Pozadie v CSS (farba, poloha, obrázok, opakovanie, príloha) – všetko pre nastavenie farby pozadia resp obrázok na pozadí Html prvky
Na čo slúži CSS, ako k nemu pripojiť kaskádové štýly html dokument a základná syntax tohto jazyka Ako zmeniť farbu pozadia riadkov tabuliek, zoznamov a iných prvkov Html na webe pomocou pseudotriedy n-tého potomka
Pravidlá pre písmo (hmotnosť, rodina, veľkosť, štýl) a výška riadku pre štylizáciu písma v CSS

Shastaya na fórach narazil na skutočnosť, že stále vyvstáva otázka, čo robí vypchávka, a čo marža a ake su medzi nimi rozdiely. Preto som sa rozhodol to pripomenúť. Takže bez toho, aby sme sa uchýlili k nejasným frázam, položme si úlohu a analyzujme príklad, na ktorom bude všetko jasné.

Úloha: Na stránke potrebujete červený blok(200 x 200 pixelov), ktoré ustupuje od okrajov prehliadača hore a vľavo o 40 a 70 pixelov a text, vo vnútri ktorého je odsadenie zľava a zhora o 40 pixelov.

Riešenie: pozrite sa na obrázok a kód. Náš červený blok by nemal presiahnuť 200 x 200 pixelov a mal by byť vyplnený od okrajov prehliadača (alebo iných blokov obsahu). V skutočnosti robíme tieto zarážky cez okraj. Ak urobíme výplň, výplň sa uskutoční vo vnútri nášho červeného bloku a výplň sa získa s pozadím samotného bloku (tj červeným).

Okrem použitých vlastností (riadky 6-9) existujú aj vlastnosti margin-right, padding-right, margin-bottom, padding-bottom - sú pre odsadenie vpravo a dole. Hodnoty všetkých týchto vlastností môžu byť v pixeloch (px), percentách (%) alebo v jednotkách em.

V podstate je to tak. Existuje však niekoľko ďalších funkcií práce s nimi.

Vlastnosti okraja a vypchávky

Pri použití výplne sa rozmery výplne musia odpočítať od výšky a šírky bloku, inak sa veľkosť bloku zväčší o veľkosť výplne.

Ak nastavíte margin-left a margin-right s automatickými hodnotami pre nejaký blok, potom ak má blok pevnú šírku (napríklad 400px) a nie je tam žiadna vlastnosť float CSS, potom bude tento blok zarovnaný na stred prvok, v ktorom sa nachádza. V skutočnosti sa táto metóda zarovnania zvyčajne používa pre negumové usporiadanie so zarovnaním na stred. Aj keď IE 5.5 a staršie nepodporujú automatickú hodnotu, stále vám to nebráni v tom, aby ste ju neustále používali =).

Neodporúča sa používať výplň a okraj v tabuľkách, pretože efekt bude v rôznych prehliadačoch nepredvídateľný.

A posledná vec, ktorú som chcel povedať. Nezabudnite použiť skratkové konštrukcie príspevkov ako margin: 10px 0 5px 20px;. Ak je zarážka nula, môžete jednoducho zadať nulu bez zadania parametrov. Zapamätanie si toho, ktorý z parametrov patrí ku ktorej hranici je veľmi jednoduché - pre blok idú odsadenia v smere hodinových ručičiek: prvé číslo je hore, druhé je vpravo, tretie je dole, štvrté je vľavo.

To je vlastne všetko, čo som vám dnes chcel povedať. Pekný víkend všetkým!

Táto vlastnosť môže mať jednu až štyri hodnoty.

Na obrázku svetlošedá farba označuje oblasť, za ktorú je vlastnosť čalúnenia zodpovedná:

1. Keď určíte štyri hodnoty(5px 10px 15px 20px ) - poradie výplne bude nasledovné: Hore(5 pixelov) - Správny(10 pixelov) - dno(15 pixelov) - Vľavo(20px). Ak si chcete zapamätať poradie odsadenia v jednom vyhlásení, môžete použiť anglické slovo TR ou BL e (kde T- vrchná časť, R-správny, B- spodok, L- vľavo).


2. Keď určíte tri významy(5px 10px 15px ) - poradie výplne bude nasledovné: Hore(5 pixelov) - Pravá ľavá(10 pixelov) - dno(15 pixelov).


3. Keď určíte dve hodnoty(5px 10px ) - prvá hodnota (5px ) nastaví veľkosť výplne z hornej a dolnej časti obsahu prvku, druhá (10px ) hodnota nastaví výplň vľavo a vpravo od obsahu prvku.


4. Keď určíte jednu hodnotu(5px) - výplň na všetkých stranách bude mať rovnakú veľkosť - 5px.

Podpora prehliadača

Nehnuteľnosť			Opera		IExplorer	hrana
vypchávka	1.0	1.0	3.5	1.0	4.0	12.0

Syntax CSS:

výplň: "dĺžka | počiatočná | zdediť" ;

Syntax JavaScriptu:

object.style.padding = "5px"

Hodnoty majetku

CSS verzia

CSS1

Zdedené

Nie

Animované

Áno.

Príklad použitia

Hneď vám poviem, že toto je veľmi dôležitá lekcia. Po jeho preštudovaní budete vedieť usporiadať prvky na stránke, nastaviť medzi nimi odsadenia, vytvoriť ich v samostatnom špecifickom bloku, nastaviť okraje.

vypchávka

Padding je vlastnosť, ktorá nastavuje mieru odsadenia prvku od vnútorného okraja okraja k obsahu. Obsahom môže byť obyčajný text, obrázok alebo podradený prvok, ktorý môže mať aj svoje vlastné okraje.

Jednotky môžu byť pixely (px) alebo percentá (%).

#blok(
výplň: 12px /* odsadenie od okrajov bloku k obsahu - na všetkých stranách bude 12 pixelov */
}

Pole je možné zadať iba na jednej konkrétnej strane:

vypchávkový vrch- vlastnosť, ktorá vytvára okraje navrchu.
čalúnenie vpravo- vlastnosť, ktorá vytvára polia vpravo.
polstrovanie-dno- vlastnosť, ktorá vytvára spodné okraje.
polstrovanie-vľavo- vlastnosť, ktorá vytvára okraje vľavo.

#blok(
padding-bottom: 25px /* spodný okraj 25px */
padding-left: 15px; /* ľavý okraj 15px */
}

Ako ste si všimli, ak takto zadáte polia z 2 alebo 3 strán, dostanete dlhý kód. Pre vlastnosť výplne existuje skrátený zápis. Všetky 4 hodnoty sú v ňom uvedené postupne - od každého okraja v jednom riadku sa pohyb pohybuje v smere hodinových ručičiek, začínajúc zhora:

Polstrovanie: Horné čalúnenie vpravo Polstrovanie Spodné čalúnenie ľavé;

#blok(
padding: 25px 10px 15px 6px; /* hore 25px, vpravo 10px, dole 15px, vľavo 6px */
}

marža

Vlastnosť margin, na rozdiel od paddingu, nastavuje veľkosť paddingu medzi okrajmi prvkov.
Ak je prvok potomkom, potom výplň predstavuje priestor od okraja prvku po vnútorný okraj okraja rodiča.
Ak prvok nemá rodiča, potom sa za odsadenie považuje voľný priestor nastavený vlastnosťou k okrajom okraja okolitých prvkov.

#blok(
okraj: 4px
}

Ak chcete zadať zarážky iba na určitých stranách, existujú nasledujúce vlastnosti:

margin-top- vlastnosť, ktorá vytvára zárezy zhora.
okraj-pravý- vlastnosť, ktorá vytvára zárezy vpravo.
okraj-dole- vlastnosť, ktorá vytvára zárezy zospodu.
ľavý okraj- vlastnosť, ktorá vytvára zarážky vľavo.

Rovnako ako vlastnosť padding, margin má tiež schopnosť skrátene hodnoty pre rôzne strany. Pohyb prebieha v smere hodinových ručičiek od horného okraja:

Okraj: Horný okraj vpravo Okraj Dolný okraj vľavo;

#blok(
okraj: 15px 10px 5px 25px; /* hore 15px, vpravo 10px, dole 5px, vľavo 25px */
}

Ďakujem za tvoju pozornosť!