Marginaali blokeerimine - algus CSS-trikid

margin-block-startVara CSS määratleb ruumi mööda välimine lähtekohaks serva element ploki suunas. See sisaldub CSSi loogiliste omaduste 1. taseme spetsifikatsioonis, mis on praegu tööprojektis.

.element ( margin-block-start: 25%; writing-mode: vertical-lr; )

Lähteaine serva plokis suunas määrab elemendi writing-mode, directionja text-orientation. Niisiis, margin-block-starthorisontaalses vasakult paremale kontekstis kasutades toimib see täpselt samamoodi nagu margin-topelemendi alguserv on selle ülemine osa.

Aga kui me muudame writing-modenäiteks vertikaalseks, siis element pööratakse, asetades algusserva vasakule. Selle tulemusena margin-block-startkäitub täpselt nagu margin-left. Põhimõtteliselt on lähteserv voolava suuna suhtes. Seda me mõtleme, kui räägime "loogilistest" omadustest.

Süntaks

margin-block-start:

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 vara aktsepteerib samu väärtusi, margin-topmis järgivad 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

margin-block-start aktsepteerib ühe pikkuse või märksõna väärtust.

/* Length values */ margin-block-start: 20px; margin-block-start: 2rem; margin-block-start: 25%; /* Keyword values */ margin-block-start: auto; /* Global values */ margin-block-start: inherit; margin-block-start: initial; margin-block-start: unset;