Marginaali blokeerimine CSS-trikid

Lang L: none (table-of-contents)

margin-blockon CSS-is lühike omadus, mis määrab elemendi margin-block-startja margin-block-endväärtused, mis mõlemad on loogilised omadused. See loob ruumi ümber elemendi inline suunas, mis on määratud elemendi writing-mode, directionja text-orientation.

Atribuut on osa CSS-i loogiliste omaduste ja väärtuste 1. taseme spetsifikatsioonist, mis on praegu redaktori mustandi olekus. See tähendab, et selle määratlus ja teave selle ja ametliku soovituse vahel võivad muutuda.

.element ( margin-block: 30px 60px; writing-mode: vertical-rl; /* Determines the block start direction */ )

Kui väärtuseks writing-modeon seatud horizontal-lr, margin-blocktoimib atribuut samamoodi nagu seadistamine margin-topja margin-bottom. Selle omaduse üks huvitav aspekt on see, et see on üks loogilistest omadustest, millel pole üks-ühele kaarti, millel pole loogilist omadust. Pole ühtegi vanemat omadust, mis määraks mõlemad (ja ainult) ploki suuna veerised.

Kuid muutke elemendi writing-modeväärtuseks midagi sellist vertical-lrja "alumist" serva pööratakse vertikaalsuunas, toimides rohkem kui omadused margin-leftja margin-right.

Süntaks

margin-block: (1,2)

Päris imelik on näha, kuidas ühe omaduse süntaks viitab dokumentatsioonis teise CSS-i atribuudi süntaksile, kuid see on tegelikult see. Põhimõtteliselt üritatakse öelda seda, et atribuut aktsepteerib samu väärtusi kui margin-top(kuni kaks korda), mis järgib seda süntaksit:

margin-top: | | auto;

Algne väärtus: 0
Kehtib kõigi elementide kohta, välja arvatud sisemised lauaelemendid, rubiinpõhjad ja rubiinmärkimistega konteinerid
Päritud: ei
Protsendid: nagu ka vastava füüsilise omaduse osas
Arvutatud väärtus: sama mis vastavatel margin-*omadustel
Animatsiooni tüüp: arvutatud väärtuse tüübi järgi

Väärtused

Kui olete marginlühikirjeldusega vara margin-blocktuttav, tunnete end väga tuttavalt. Ainus erinevus on see, et see töötab nelja asemel kahes suunas.

/* Length values */ margin-block: 20px 40px; margin-block: 2rem 4rem; margin-block: 25% 15%; margin-block: 20px; /* a single value sets both values */ /* Keyword values */ margin-block: auto; /* Global values */ margin-block: inherit; margin-block: initial; margin-block: unset;