Relatívna hodnota výplne. Ako nastaviť okraj a výplň CSS (a skvelé tipy na rozloženie). Veci na zapamätanie

Od autora: Keď som sa prvýkrát začal učiť CSS, neustále som bol zmätený v súvislosti s okrajmi a výplňou. Vyzerali veľmi podobne av niektorých prípadoch poskytli rovnaký výsledok. V tomto návode uvidíte rozdiel medzi okrajmi CSS a výplňami a ako tieto vlastnosti ovplyvňujú priestor medzi prvkami na stránke. Budeme tiež diskutovať o kolapsujúcich okrajoch pomocou rôznych jednotiek merania pri vytváraní responzívnych stránok. Článok ukončíme niekoľkými tipmi na rozloženie pomocou okraja a výplne.

blokový model

Prvky v CSS sú reprezentované ako obdĺžnikové rámčeky. Veľkosť obdĺžnikového bloku je určená vlastnosťami prvku: obsah, výplň, rám, okraj.

Oblasť obsahu prvku sa nachádza v strede. Ďalšie čalúnenie obklopuje oblasť obsahu. Lem obopína vypchávku a okraj je vonkajšia vrstva, t.j. je mimo živlu. Aby ste lepšie pochopili, čo je v stávke, nižšie je znázornený diagram.

Ako môžete vidieť na obrázku, výplň je vrstva, ktorá rozširuje prvok od vonkajšieho okraja oblasti obsahu k vnútornému okraju rámca. Táto vlastnosť riadi vzdialenosť medzi okrajom prvku a jeho obsahom. Výplň ovplyvňuje veľkosť prvku na stránke, ale neovplyvňuje medzery medzi prvkami na stránke.

Ak potrebujete zväčšiť alebo zmenšiť medzery medzi prvkami, použite okraj. Vlastnosť margin žiadnym spôsobom neovplyvňuje veľkosť prvku.

Je dôležité si uvedomiť, že veľkosti všetkých blokov na webovej stránke závisia od použitého modelu boxu. Existujú dva modely boxov: model boxu W3C, tradičný model boxu.

Podľa krabicového modelu W3C sa šírka prvku vypočíta z obsahu krabice bez ohľadu na výplň a okraj. Navrchu sú pridané vypchávky a okraj dané rozmery, čo môže viesť k nepredvídateľným následkom pre rozloženie stránky.

Vezmime si napríklad blok so šírkou 200px a výškou 200px, výplňou 10px na všetkých stranách a okrajom 2px na všetkých stranách. Prehliadač nevidí blok 200 pixelov. Prehliadač vypočíta horizontálny priestor potrebný na zobrazenie bloku a je 224 pixelov: 200 (šírka) + 2 (ľavý okraj) + 10 (ľavý okraj) + 10 (pravý okraj) + 2 (pravý okraj) = 224 pixelov. Keďže ide o štvorec, výška bude tiež 224 pixelov.

Na druhej strane tradičný krabicový model berie ako šírku súčet obsahu, vypchávok a okraja. To znamená, že ak je váš blok široký 200px, tak prehliadač vypočíta horizontálny priestor potrebný na jeho zobrazenie a ten bude mať 200px vrátane výplne a orámovania. Výsledok je predvídateľnejší a ľahšie sa s ním pracuje.

Všetky prehliadače štandardne používajú model boxu W3C. Model je možné nastaviť manuálne pomocou vlastnosti box-sizing. Dve akceptované hodnoty sú content-box (W3C) a border-box (tradičný). Tradičný model je intuitívnejší, vďaka čomu je medzi webovými vývojármi najobľúbenejší.

Nasledujúci text ukazuje, ako použiť tradičný model vo svojom projekte pomocou veľkosti boxu:

html ( box-sizing: border-box; ) *, *:before, *:after ( box-sizing: inherit; )

Ak sa rýchlejšie zapamätáte, keď niečo robíte sami, skúste experimentovať so zábavnou interaktívnou ukážkou od Guy Routledge.

Nastavenie okrajov a výplne

Vlastnosti padding-top , padding-right , padding-bottom a padding-left ovládajú výplň na všetkých štyroch stranách prvku. Výplň môžete nastaviť aj prostredníctvom vlastnosti skratky. Ak je napísaná jedna hodnota výplne, CSS ju použije na určenie výplne pre všetky 4 strany:

/* všetky 4 strany */ padding: 10px;

Ak existujú 3 hodnoty, prvá je pre hornú časť, druhá pre ľavú a pravú stranu a tretia pre spodnú časť:

/* hore | horizontálne | dole */ výplň: 1em 20px 2em;

Ak sú prítomné všetky 4 hodnoty, potom každá zodpovedá za hornú, pravú, dolnú a ľavú stranu:

/* hore | vpravo | dole | vľavo */ padding: 10px 10% 2em 15%;

V ukážke nižšie je oranžové pozadie oblasťou obsahu pre rôzne prvky, biela oblasť medzi okrajom a obsahom je výplň:

Výplň možno ovládať na všetkých 4 stranách, rovnako ako výplň, pomocou vlastností margin-top , margin-right , margin-bottom a margin-left. Okraj je tiež možné nastaviť pre všetky 4 strany naraz pomocou vlastnosti skratky.

/* všetky 4 strany */ okraj: 10px; /* vertikálne | horizontálne */ okraj: 2em 4em; /* hore | horizontálne | dole */ okraj: 2em auto 2em; /* hore | vpravo | dole | vľavo */ okraj: 10px 10% 2em 15%;

Veci na zapamätanie

Použite správne merné jednotky

Pri práci s výplňou a okrajom sa vyhnite absolútnym jednotkám. Takéto jednotky sa neprispôsobujú zmenám veľkosti písma a šírky obrazovky.

Povedzme, že nastavíte šírku prvku na 50 % a okraj na 15 pixelov. Pri šírke 1200 pixelov bude šírka prvku 600 pixelov a okraj bude stále 15 pixelov. Pri šírke 769 pixelov bude šírka prvku 384 pixelov a okraj bude stále 15 pixelov.

Šírka prvku sa zmenila o 36 %, pričom jeho okraj zostal rovnaký. Vo väčšine prípadov to nie je najväčší problém. Ak však nastavíte okraj prvku v percentách, budete mať lepšiu kontrolu nad rozložením stránky na všetkých obrazovkách. Všetko bude vyzerať proporcionálne bez náhlych skokov v hodnotách použitého okraja a výplne.

Podobne možno budete chcieť pridať odsadenie do textových prvkov na stránke. Vo väčšine prípadov chcete, aby výplň bola úmerná veľkosti písma na prvku. Nie je možné to urobiť na absolútnych jednotkách. Ak však nastavíte výplň na em, automaticky sa prispôsobí veľkosti písma. Ukážka nižšie ukazuje priblíženie v akcii.

Ako prehliadače vypočítavajú okraj a výplň pre rôzne jednotky

Prehliadače vypočítavajú konečné hodnoty okraja a výplne odlišne v závislosti od jednotiek merania.

Okraj a výplň, uvedené v percentách, sú vypočítané vzhľadom na šírku kontajnera. Takže padding 5% bude 5px, ak je kontajner široký 100px, alebo 50px, ak je kontajner široký 1000px. Nezabudnite, že horná a spodná hodnota sa vypočítava aj podľa šírky nádoby.

V prípade ems je hodnota okraja a výplne založená na veľkosti písma prvku. V predchádzajúcej ukážke je výplň na spodných troch textových prvkoch 1 em. Kvôli rôznym veľkostiam písma bude vypočítaná hodnota výplne vždy iná.

K dispozícii sú tiež 4 zobrazovacie jednotky vw, vh, vmin a vmax. V tomto prípade budú hodnoty okraja a výplne závisieť od výrezu. Napríklad padding 5vw by bol 25px na 500px výrezu a padding 10vw by bol 50px na rovnakom výreze. Viac o týchto merných jednotkách sa môžete dozvedieť v článku SitePoint "Jednotky merania CSS: Rýchly štart".

Ak ste noví, vedieť, ako tieto jednotky fungujú, vám pomôže rýchlo pochopiť, prečo sa výplň a okraje prvkov HTML menia v závislosti od veľkosti rodiča, písma alebo dokonca výrezu. A to vám dá možnosť ovládať svoje rozloženie.

Zrútené okraje

Musíte si byť vedomí aj konceptu padajúcich okrajov. V určitých situáciách sa horný a dolný okraj dvoch prvkov môže zbaliť do jedného. Tento jav sa nazýva margin kolaps.

Povedzme, že máte dva prvky pod sebou, t.j. na rovnakej úrovni. Ak nastavíte margin-bottom na 40 pixelov pre prvý prvok a 25 pixelov pre druhý prvok, potom sa celkový okraj medzi prvkami nebude rovnať 65 pixelom. Odsadenie sa bude rovnať hodnote väčšieho rozpätia, t.j. 40 pixelov.

Podobne sa môžu zrútiť okraje medzi rodičom a prvým alebo posledným dieťaťom. Stáva sa to vtedy, ak medzi podradeným a nadradeným okrajom nie je žiadne orámovanie, výplň alebo vložený obsah. V tomto prípade, ak na rodičovi nie je výplň alebo orámovanie, okraj podradeného prvku bude „plynúť“ z rodiča.

Toto správanie môžete opraviť. Ak to chcete urobiť, musíte pridať bariéru medzi nadradený okraj a podradený okraj. Ukážka nižšie ukazuje, ako sa problém vyrieši pridaním orámovania alebo výplne do nadradeného prvku.

V prípade záporných marží je konečná hodnota zrútenej marže súčtom kladnej marže plus najmenšej zápornej marže. Ďalšie informácie o zbaľujúcich sa okrajoch nájdete v článku Zrútenie okrajov od Adama Robertsa.

Zaujímavé spôsoby využitia okraja a výplne

Niekedy môže použitie okrajov a výplne vyriešiť problémy s rozložením. Nižšie je popísaných niekoľko príkladov:

Zachovať pomer strán na obrázkoch

Obrázky na stránke majú často rôzne pomery strán. Ak potrebujete zobraziť všetky obrázky s rovnakým pomerom strán, pomôže vám odsadenie CSS.

Aby ste to dosiahli, musíte nastaviť výšku rodiča na nulu a vlastnosť padding-top rodiča sa musí rovnať hodnote pomeru strán, vyjadrenej v percentách.

Napríklad pomer strán 16:9 sa dosiahne výplňou: 56,25 % 0 0 0. Hodnota 56,25 sa získa ako (9/16)*100. Pomocou tejto metódy môžete vypočítať percentá výplne pre akýkoľvek iný pomer strán.

Záver

Ak ste novým používateľom CSS, dúfam, že vám tento návod pomohol pochopiť rozdiel medzi okrajom a výplňou. Musíte sa naučiť definovať margin a padding z hľadiska skratiek a vhodných jednotiek. V poslednej časti som ukázal dve zaujímavé spôsoby použitie vlastností na rozloženia a poskytli vám odkazy na zdroje na ďalšie vzdelávanie. Ak máte nejaké ďalšie tipy na okraje a výplne CSS, uverejnite ich v komentároch.

Popis

Nastavuje hodnotu okrajov okolo obsahu prvku. Okraj je vzdialenosť od vnútorného okraja rámu prvku k pomyselnému obdĺžniku, ktorý ohraničuje jeho obsah (obrázok 1).

Vlastnosť padding umožňuje nastaviť hodnotu paddingu pre všetky strany prvku naraz, alebo ju definovať len pre zadané strany.

Syntax

výplň: [hodnota | percent] (1, 4) | dediť

hodnoty

Je povolené použiť jednu, dve, tri alebo štyri hodnoty, pričom ich oddelíte medzerou. Účinok závisí od počtu hodnôt a je uvedený v tabuľke. jeden.

Okraje možno zadať v pixeloch (px), percentách (%) alebo iných prijateľných jednotkách CSS. Hodnota zdediť znamená, že je zdedená od rodiča. Pri zadávaní okraja v percentách sa hodnota vypočíta zo šírky rodiča prvku.

HTML5 CSS2.1 IE Cr Op Sa Fx

Výsledok tento príklad znázornené na obr. 2.

Ryža. 2. Použitie vlastnosti výplne

Objektový model

document.getElementById("elementID ").style.padding

Prehliadače

Internet Explorer do verzie 7.0 nepodporuje zdediť hodnotu.

V predchádzajúcej kapitole sme o nich hovorili CSS vlastnosti, napríklad okraj (pole) a odsadenie (odsadenie). Teraz sa im budeme venovať podrobnejšie a zvážime, ako sa navzájom líšia a aké vlastnosti majú.

Medzery medzi prvkami môžete vytvárať oboma spôsobmi, ale ak je odsadenie odsadenie od obsahu po okraj bloku, potom okraj je vzdialenosť od jedného bloku k druhému, medziblokový priestor. Snímka obrazovky ukazuje dobrý príklad:

Výplň oddeľuje obsah od okraja bloku, zatiaľ čo okraj vytvára medzery medzi blokmi

Ako vidíte, okraje CSS a výplň sú odlišné, aj keď niekedy bez toho, aby ste sa pozreli na kód, nie je možné určiť, ktorá vlastnosť sa používa na nastavenie vzdialenosti. Stáva sa to vtedy, keď pre blok obsahu neexistuje rám ani pozadie.

Ak chcete nastaviť okraj alebo odsadenie v CSS z každej strany prvku, existujú nasledujúce vlastnosti:

Zarážky:

• vrchná výplň: význam;
• padding-right: význam;
• spodná výplň: význam;
• výplň vľavo: význam;

Polia:

• margin-top: význam;
• pravý okraj: význam;
• okraj-dole: význam;
• ľavý okraj: význam;

Hodnoty je možné zadať v ľubovoľnej jednotke CSS – px, em, %, atď. Príklad: margin-top: 15px .

Existuje aj veľmi šikovná vec ako CSS skratka pre margin a padding. Ak potrebujete nastaviť okraje alebo výplň pre všetky štyri strany prvku, nie je potrebné písať vlastnosť pre každú stranu zvlášť. Všetko je jednoduchšie: pre okraj a výplň môžete zadať 1, 2, 3 alebo 4 hodnoty naraz. Spôsob rozloženia nastavení závisí od počtu hodnôt:

• 4 hodnoty: padding je nastavený pre všetky strany prvku v nasledujúcom poradí: hore, vpravo, dole, vľavo: padding: 2px 4px 5px 10px;
• 3 hodnoty: padding je nastavený najprv pre hornú stranu, potom pre ľavú aj pravú a potom pre spodnú: padding: 3px 6px 9px;
• 2 hodnoty: padding je nastavený najprv súčasne z hornej a spodnej strany a potom - súčasne pre ľavú a pravú stranu: padding: 6px 12px;
• 1 hodnota: nastavte rovnakú výplň pre všetky strany prvku: výplň: 3px;

Rovnaké pravidlá platia pre vlastnosť margin CSS. Všimnite si, že pre okraj môžete použiť aj záporné hodnoty (napríklad -3px), čo môže byť niekedy celkom užitočné.

prepadnutý okraj

Predstavte si situáciu: dve blokový prvok sú na sebe a majú okraje. Pre horný blok nastavený na okraj: 60px a spodný na okraj: 30px . Bolo by logické predpokladať, že dva ohraničujúce okraje dvoch prvkov by sa jednoducho dotýkali a v dôsledku toho by medzera medzi blokmi bola 90 pixelov.

Veci sa však majú inak. V skutočnosti sa v takejto situácii prejaví efekt, ktorý sa nazýva kolaps, keď sa z dvoch susedných polí prvkov vyberie to najväčšie. V našom príklade bude výsledná medzera medzi prvkami 60 pixelov.

Zbalené okraje fungujú len pre horný a dolný okraj prvkov a nevzťahujú sa na okraje na pravej a ľavej strane. Konečná hodnota medzery sa vypočítava v rôznych situáciách rôznymi spôsobmi:

• Keď sú obe hodnoty okraja kladné, konečná veľkosť okraja bude väčšia hodnota.
• Ak je jedna z hodnôt záporná, na výpočet veľkosti poľa je potrebné získať súčet hodnôt. Napríklad s hodnotami 20px a -18px bude veľkosť poľa:
  20 + (-18) = 20 - 18 = 2 pixely.
• Ak sú obe hodnoty záporné, modul týchto čísel sa porovná a vyberie sa číslo s väčším modulom (teda menšie zo záporných čísel). Príklad: chcete porovnať hodnoty polí -6px a -8px . Moduly porovnávaných čísel sú 6 a 8. Z toho vyplýva, že 6 -8 . Konečná veľkosť poľa je -8 pixelov.
• V prípade, že sú hodnoty špecifikované v rôznych jednotkách CSS, znížia sa na jednu, potom sa porovnajú a vyberie sa väčšia hodnota.
• Veľkosť okraja pre podradené prvky je ešte zaujímavejšia: ak má potomok väčší okraj ako rodič, potom má prednosť. V tomto prípade sa veľkosť horného a spodného okraja rodiča zhoduje s veľkosťou nastavenou pre dieťa. V tomto prípade nebude medzi rodičom a dieťaťom žiadna vzdialenosť.

Popis

Nastavuje hodnotu okrajov okolo obsahu prvku. Okraj je vzdialenosť od vnútorného okraja rámu prvku k pomyselnému obdĺžniku, ktorý ohraničuje jeho obsah (obrázok 1).

Vlastnosť padding umožňuje nastaviť hodnotu paddingu pre všetky strany prvku naraz, alebo ju definovať len pre zadané strany.

Syntax

výplň: [hodnota | percent] (1, 4) | dediť

hodnoty

Je povolené použiť jednu, dve, tri alebo štyri hodnoty, pričom ich oddelíte medzerou. Účinok závisí od počtu hodnôt a je uvedený v tabuľke. jeden.

Okraje možno zadať v pixeloch (px), percentách (%) alebo iných prijateľných jednotkách CSS. Hodnota zdediť znamená, že je zdedená od rodiča. Pri zadávaní okraja v percentách sa hodnota vypočíta zo šírky rodiča prvku.

HTML5 CSS2.1 IE Cr Op Sa Fx

Výsledok tohto príkladu je znázornený na obr. 2.

Ryža. 2. Použitie vlastnosti výplne

Objektový model

document.getElementById("elementID ").style.padding

Prehliadače

Internet Explorer do verzie 7.0 nepodporuje zdediť hodnotu.

Hneď vám poviem, že toto je veľmi dôležitá lekcia. Po jeho preštudovaní budete môcť na stránku umiestňovať prvky, nastavovať medzi nimi zarážky, vytvárať ich v samostatnom špecifickom bloku a nastavovať 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.
okraj-vľavo- 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ť!