Margin-inline - CSS-triki | CSS almanahs 2025

margin-inlineir CSS stenogrāfijas rekvizīts, kas nosaka elementa margin-inline-startun margin-inline-endvērtības, kuras abas ir loģiskas īpašības. Tas rada telpu ap elementa inline virzienā, ko nosaka šis elements ir writing-mode, directionun text-orientation.

Īpašums ir daļa no CSS loģisko rekvizītu un vērtību 1. līmeņa specifikācijas, kas pašlaik atrodas redaktora melnraksta statusā. Tas nozīmē, ka definīcija un informācija par to var mainīties starp pašreizējo un oficiālo ieteikumu.

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

Ja vērtība writing-modeir iestatīta uz horizontal-lr, margin-inlineīpašums darbosies tāpat kā iestatīšana margin-leftun margin-right. Viens interesants šī rekvizīta aspekts ir tas, ka tā ir viena no loģiskajām īpašībām, kurai nav kartes viens pret vienu ar neloģisku rekvizītu. Nav vecāka rekvizīta, kas iestatītu abas (un tikai) iekšējā virziena piemales.

Mainiet elementu writing-modeuz kaut ko līdzīgu, vertical-lrun “inline” malas tiek pagrieztas vertikālā virzienā, darbojoties vairāk kā margin-topun margin-bottomīpašības.

Sintakse

margin-inline: (1,2)

Ir diezgan dīvaini redzēt, kā viena rekvizīta sintakse dokumentācijā atsaucas uz cita CSS rekvizīta sintaksi, bet tas tiešām ir tas. Tas, ko tas būtībā mēģina pateikt, ir tas, ka īpašums pieņem tādas pašas vērtības kā margin-top(līdz divām reizēm), kas seko šai sintaksei:

margin-top: | | auto;

Sākotnējā vērtība: 0
Attiecas uz visiem elementiem, izņemot iekšējos galda elementus, rubīna bāzes konteinerus un rubīna anotācijas konteinerus
Mantots: nē
Procenti: tāpat kā attiecīgajam fiziskajam īpašumam
Aprēķinātā vērtība: tāda pati kā attiecīgajām margin-*īpašībām
Animācijas tips: pēc aprēķinātās vērtības veida

Vērtības

Ja esat iepazinies ar marginstenogrāfijas īpašumu, tad margin-inlinejutīsities ļoti pazīstams. Vienīgā atšķirība ir tā, ka tā darbojas divos virzienos, nevis četros.

/* 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;