Marginaali blokeerimine - CSS-trikid

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

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

Lõpp serva plokk suunas määrab elemendi writing-mode, directionja text-orientation. Niisiis, margin-block-endhorisontaalses vasakult paremale kontekstis kasutamisel toimib see täpselt samamoodi nagu margin-bottomelemendi algserv on selle põhi.

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

Süntaks

margin-block-end:

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-end aktsepteerib ühe pikkuse või märksõna väärtust.

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