Veerisesisene lõpp - CSS-trikid | CSS-i almanahh 2025

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

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

Lõpp serva inline suunas määrab elemendi writing-mode, directionja text-orientation. Niisiis, margin-inline-endhorisontaalses vasakult paremale kontekstis kasutamisel toimib see täpselt samamoodi nagu margin-rightelemendi lõppserv on parem külg.

Kuid kui muudame writing-modenäiteks vertikaalseks, pööratakse element päripäeva, asetades lõppserva põhja poole. Selle tulemusena margin-inline-endkäitub täpselt nagu margin-bottom. Põhimõtteliselt on lähteserv voolava suuna suhtes. Seda me mõtleme, kui räägime "loogilistest" omadustest.

Süntaks

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

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