Veerisesisene - CSS-trikid | CSS-i almanahh 2025

margin-inlineon CSS-is lühike omadus, mis määrab elemendi margin-inline-startja margin-inline-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-inline: 60px auto; writing-mode: vertical-rl; /* Determines the inline start direction */ )

Kui väärtuseks writing-modeon seatud horizontal-lr, margin-inlinetoimib atribuut samamoodi nagu seadistamine margin-leftja margin-right. 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) sissepoole suunatud veerised.

Kuid muutke elemendi writing-modemillekski sarnaseks vertical-lrja „inline“ servad pööratakse vertikaalsuunas, toimides pigem nagu margin-topja margin-bottomomadused.

Süntaks

margin-inline: (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-inlinetuttav, tunnete end väga tuttavalt. Ainus erinevus on see, et see töötab nelja asemel kahes suunas.

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