Vlastnosť okraja CSS: zarážky vonkajších prvkov

Vlastnosť okraja CSS riadi vonkajšie prvky prvku. Môže sa použiť na nastavenie vzdialenosti medzi susednými blokmi alebo presunutie podriadeného uzla z rodičovskej hranice. Okraje sa nezúčastňujú na blokovom modeli CSS a nezadajú sa do šírky a výšky prvku.

Syntax vlastností

Existuje všeobecná vlastnosť okraja CSS, pomocou ktorej môžete určiť hodnoty všetkých zárezov naraz, ako aj štyri samostatné vlastnosti pre každú stranu:
  • okraj-vľavo;
  • margin-right;
  • okrajová vrstva;
  • spodný okraj.
  • Definujte hodnotu odsadenia v pixeloch, relatívnych jednotkách (em, rem) alebo percentách. V druhom prípade 100% vždy akceptuje šírku rodičovského prvku, dokonca aj pre hornú a spodnú stranu.




    rodič {{15} šírka: 500px;
    , výška: 100 pixelov;
    }
    dieťa {
    margin-left: 10%; //500px * 10% = 50px
    okraj: 10%; //500px * 10% = 50px
    }

    Okraj CSS môže byť negatívny.

    Keď používate syntax skupiny, musíte prejsť z jedného na štyri parametre tak, že zoznam účastníkov bude uvedený v správnom poradí.

    • Jedna: pre všetky strany naraz.
    • Dve: pre hornú a spodnú časť a pre bočné strany samostatne.
    • Tri: pre vrch, bok a dno.
    • Štyri: Počítanie strán v smere hodinových ručičiek, začínajúc vrchom.
    prvok {
    okraj: 20px;
    }

    prvok {
    okraj: 20px 30px;
    }

    prvok {
    okraj: 20px 30px 40px;


    prvok {
    okraj: 20px 30px 40px 50px;
    }

    Algoritmy pre výpočet intervalov

    Vlastnosť marže CSS nie jezdedený a štandardne je nula. Zdá sa, že na prvom mieste by nemal mať žiadny prvok na stránke vonkajšie vruby, ale nie. Prehliadače z vlastnej iniciatívy nastavili formátovanie viacerých značiek, napríklad zoznamov. Je dôležité, aby ste to zohľadnili pri rozložení.



    Špecifikácia definuje správanie okrajov uzlov s iným typom odrazu. Položky reťazca ignorujú hodnotu hornej a dolnej zarážky, aj keď sú priamo špecifikované tak, aby neporušovali štruktúru riadku.

    Bloky a reťazce adekvátne odrážajú okraje na všetkých štyroch stranách, avšak v niektorých prípadoch môže byť správanie tejto vlastnosti neočakávané.

    Zánik marže

    Obrázok znázorňuje dva prvky umiestnené jeden po druhom s inštalovanými vonkajšími zarážkami. V prvej verzii sa spájajú dolné a horné okraje blokov, v druhej verzii sú zložené. Aký typ správania sa zdá logickejší?

    Blokové prvky v systéme CSS sa správajú v prvom type a bloky s naliehavými blokmi a kontajnery typu flex - na druhej strane. V tomto prípade sú stlačené iba vertikálne odsadenia, horizontálne sú vždy zostavené.

    Odstránenie okraja za otcom

    V blokových uzloch existuje ešte jeden rozmar: v niektorých prípadoch môže byť okraj podradeného prvku ponechaný za hranice rodičovského kontajnera. Stane sa to vtedy, ak existuje prvok ustúpenia, ktorý nie je od ohraničenia oddelený žiadnymi inými prvkami, žiadnym textovým uzlom, žiadnym rámcom alebo polstrovaním.

    Na obrázku je zobrazený dcérsky blok, ktorý dostal odpočítanie v tom zmysle, že sa odkloní od hornej hranice rodičovského kontajnera. Namiesto toho bol okraj odobratý mimo otca a tlačil ho z hranice svojho staršieho predka.


    Súvisiace publikácie