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

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

Výplň oddeľuje obsah od okraja bloku a okraj vytvára medzery medzi blokmi

Ako vidíte, okraje CSS a výplň sa navzájom líšia, 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ď chýba rám alebo pozadie bloku obsahu.

Na nastavenie okraja alebo odsadenia v CSS na každej strane prvku existujú nasledujúce vlastnosti:

Vypchávka:

• 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ľných jednotkách CSS – px, em, %, atď. Príklad: margin-top: 15px .

Existuje aj veľmi pohodlná vec, napr skratka pre margin a padding CSS. Ak potrebujete nastaviť okraje alebo výplň na všetkých štyroch stranách prvku, nemusíte nutne písať vlastnosť pre každú stranu samostatne. Všetko je jednoduchšie: pre okraj a výplň môžete zadať 1, 2, 3 alebo 4 hodnoty naraz. Počet hodnôt určuje, ako sú nastavenia rozdelené:

• 4 hodnoty: padding je nastavený pre všetky strany prvku v nasledujúcom poradí: top, right, bottom, left: padding: 2px 4px 5px 10px;
• 3 hodnoty: výplň sa nastaví najprv pre hornú stranu, potom súčasne pre ľavú a pravú stranu a potom pre spodnú časť: výplň: 3px 6px 9px;
• 2 hodnoty: padding sa nastaví najprv súčasne z hornej a spodnej strany a potom súčasne pre ľavú a pravú stranu: padding: 6px 12px;
• Hodnota 1: pre všetky strany prvku je nastavené rovnaké odsadenie: odsadenie: 3px;

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

Zbaliť okraj

Predstavte si situáciu: dva blokové prvky sú umiestnené nad sebou a majú polia okrajov. Horný blok je nastavený na margin: 60px a spodný blok je nastavený na margin: 30px . Bolo by logické predpokladať, že dve hraničné polia dvoch prvkov sa budú jednoducho dotýkať a v dôsledku toho sa medzera medzi blokmi bude rovnať 90 pixelom.

Veci sa však majú inak. V skutočnosti v takejto situácii nastáva efekt, ktorý sa nazýva kolaps, keď sa z dvoch susedných polí prvkov vyberie najväčšia veľkosť. V našom príklade bude konečná medzera medzi prvkami 60 pixelov.

Vzdialenosť medzi blokmi sa rovná väčšej z hodnôt

Zbalený okraj funguje len pre horný a dolný okraj prvkov a nevzťahuje sa na okraje na pravej a ľavej strane. Konečná hodnota medzery sa v rôznych situáciách vypočítava inak:

• Keď sú obe hodnoty okraja kladné, výsledná veľkosť okraja sa bude rovnať väčšej hodnote.
• Ak je jedna z hodnôt záporná, na výpočet veľkosti poľa musíte 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é, moduly týchto čísel sa porovnajú a vyberie sa číslo s väčším modulom (teda menšie zo záporných čísel). Príklad: musíte porovnať hodnoty polí -6px a -8px. Moduly porovnávaných čísel sú 6 a 8. Z toho vyplýva, že 6 -8. Výsledná veľkosť poľa je -8 pixelov.
• V prípade, že sú hodnoty uvedené v rôzne jednotky CSS sa zredukujú na jeden, potom sa porovnajú a vyberie sa väčšia hodnota.
• Veľkosť okraja pre podradené prvky sa určuje ešte zaujímavejším spôsobom: ak má potomok väčší okraj ako jeho rodič, potom sa mu dáva prednosť. V tomto prípade budú veľkosti horného a spodného okraja rodiča rovnaké ako veľkosti určené pre dieťa. V tomto prípade nebude medzi rodičom a dieťaťom žiadna vzdialenosť.

Okraje a výplň sú veľmi dôležité štýly pri vytváraní stránky HTML. Umožňujú presnejšie umiestniť prvky, vytvoriť rám s potrebnými medzerami atď. Oba štýly sú veľmi podobné a plnia podobné funkcie. Ale stále existujú rozdiely.

Prvky môžu byť vnorené alebo umiestnené vedľa seba. Pozrime sa na nasledujúci príklad:

Máme dva stoly, citrónový a modrý, umiestnené pod sebou. Tabuľky pozostávajú z jednej bunky. V prvej bunke tabuľky je červený blok. Pomocou tohto príkladu sa pozrime, ako fungujú okraje a zarážky.

Polia sú nastavené podľa štýlu vypchávka. Tento štýl sa vzťahuje iba na prvky kontajnera, ktoré môžu obsahovať ďalšie prvky. Štýl vám umožňuje nastaviť okraj medzi okrajmi prvku a jeho obsahom. Štýl marža umožňuje nastaviť odsadenie od prvku k najbližšiemu okraju iného prvku. Okrajmi iného prvku môžu byť okraje nadradeného kontajnera, ako aj okraje samotnej stránky.

Existuje niekoľko spôsobov, ako nastaviť tieto štýly. Napríklad priamo zadajte veľkosť všetkých okrajov alebo zarážok s jedným argumentom v nejakej mernej jednotke (px, ex, em, pt, cm atď.):

výplň: 3px; okraj: 3px;

V tomto prípade budú okraje a zarážky rovnaké na všetkých štyroch stranách. Pri zadávaní dvoch argumentov oddelených medzerou:

padding: 3px 5px; okraj: 3px 5px;

prvý určí množstvo okrajov/zarážok v hornej a dolnej časti, druhý - vľavo a vpravo. Keď sú uvedené tri argumenty:

padding: 3px 5px 2px; okraj: 3px 5px 2px;

prvý je okraj/odsadenie hore, druhý je vľavo aj vpravo, tretí je dole. So štyrmi argumentmi:

padding: 3px 5px 2px 6px; okraj : 3px 5px 2px 6px ;

prvý je okraj/medzera navrchu, druhý je vpravo, tretí je dole, štvrtý je vľavo. Je ľahké si to zapamätať: prvý je zhora, potom v smere hodinových ručičiek. Okrem toho môžete nastaviť okraje a výplň pre konkrétny okraj samostatne pomocou príslušných štýlov: vypchávka-top, polstrovanie-vpravo, polstrovanie-dno, polstrovanie-vľavo, margin-top, okraj-pravý, okraj-dole, ľavý okraj. Hodnotou týchto štýlov môže byť iba jeden argument, ktorý určuje veľkosť okraja/výplne pre danú stranu.

Na obrázku je červený blok vo vnútri bunky tabuľky a susedí s jej okrajmi, to znamená, že bunka nemá okraje. Nastavíme okraje buniek pomocou štýlu:

výplň: 5px;

V dôsledku toho sa stránka zmení na nasledujúcu:

Pozrime sa teraz na priehlbiny. Dve tabuľky susedia vedľa seba, ak ich chceme trochu od seba posunúť, môžeme použiť odsadenie. Tu sú dve možnosti: buď nastaviť spodnú zarážku prvej tabuľky, alebo hornú zarážku druhej tabuľky. Použime to druhé:

margin-top: 5px;

Upozorňujeme, že odsadenie nastavujeme špecificky pre tabuľku, a nie pre bunku tabuľky, ako je to v prípade polí. Tu je výsledok:

Mimochodom, v prvom prípade (medzera medzi červeným blokom a hranicami nadradenej bunky) by sa rovnaký efekt dal dosiahnuť nastavením odsadenia bloku. Vo všeobecnosti, ak niečo nie je jasné, dajte nám vedieť v komentároch.

HTML kód testovacej stránky:

<html > <hlava > <názov > Test</title> <meta http-equiv = "Typ obsahu" content = "text/html;charset=utf-8" > </head> <telo > <štýl > tabuľka (šírka: 200px; výška: 150px; orámovanie: 1px plné #555; border-collapse: zbalenie) td (vertikálne zarovnanie: hore; padding: 0px) div (šírka: 100px; výška: 100px; pozadie: červené)</style> <štýl tabuľky = "pozadie: limetka" > <tr > <td style = "padding: 5px" > <div style = "margin: 0px" ></div> </td> </tr> </tabuľka> <štýl stola = "pozadie: skyblue; margin-top: 5px"> <tr > <td ></td> </tr> </tabuľka> </body> </html> Polstrovanie-top

Dúfam, že ste už oboznámení so štruktúrou bloku. Ak nie, je uvedený nižšie.

Bloková štruktúra

Takže. Pravdepodobne už viete, že okraje a okraje bloku sú reprezentované vlastnosťami padding a margin. A v predchádzajúcom článku sme sa už tejto témy čiastočne dotkli. Na tejto stránke sa bližšie pozrieme na polia ( vypchávka) a čalúnenie ( marža ).

Vlastnosti okraja a výplne sú si navzájom veľmi podobné a plnia podobné funkcie, a preto sú často zamieňané. Ale samozrejme by ste to nemali robiť, pretože okraje a zarážky sú úplne odlišné veci. Z obrázku je to však jasne viditeľné, pretože nie náhodou je to tu zobrazené.

Takže. Okraje sú určené vlastnosťou padding. Ide o vnútorné vzdialenosti od hraníc bloku k jeho obsahu.

Táto vlastnosť sa vzťahuje na všetky prvky.

Vzdialenosť je špecifikovaná v jednotkách dĺžky CSS, %, alebo ( predvolená

Vlastnosť padding je univerzálna, pretože nastavuje okraje od okrajov prvku k jeho obsahu pre všetky jeho strany, čím kombinuje vlastnosti padding-top , padding-right , padding-bottom a padding-left , ktoré nastavujú šírku prvku. okraje pre každý bočný prvok jednotlivo.

Odsadenia sa nastavujú pomocou vlastnosti margin, ktorá určuje vzdialenosť od hraníc bloku k najbližším prvkom alebo k okrajom okna prehliadača.

Vlastnosť margin sa vzťahuje aj na všetky prvky.

Výplň je určená aj v jednotkách dĺžky CSS, % alebo ( predvolená) automaticky zistí prehliadač.

Vlastnosť margin je univerzálna, pretože nastavuje veľkosť odsadenia od okrajov prvku pre všetky jeho strany, čím kombinuje vlastnosti margin-top , margin-right , margin-bottom a margin-left , ktoré nastavujú šírku zarážok. z každého okraja prvku jednotlivo .

A ešte jedna vec: priehlbiny ( marža) sa nachádzajú mimo bloku, zatiaľ čo okraje ( vypchávka) vo vnútri, teda pozadie bloku alebo to obrázok na pozadí použiť iba na okraje a zarážky sú vždy priehľadné alebo majú pozadie hlavného ( rodičovský) blok alebo pozadie stránky.

Útržok kódu: