Margin-inline-end - CSS-triki | CSS almanahs 2025

margin-inline-endĪpašums CSS nosaka summu vietas gar ārējo nebeidzami malas elementa ar inline virzienā. Tas ir iekļauts CSS loģisko īpašību 1. līmeņa specifikācijā, kas pašlaik ir darba melnrakstā.

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

Beigu malu inline virzienā nosaka elementa writing-mode, directionun text-orientation. Tātad, lietojot margin-inline-endhorizontālā kontekstā no kreisās uz labo pusi, tas darbojas tāpat kā margin-rightelementa beigu mala ir labā puse.

Bet, ja mēs mainām writing-modeuz, teiksim, vertikāli, elements tiek pagriezts pulksteņrādītāja virzienā, gala malu novietojot virzienā uz apakšu. Rezultātā margin-inline-endizturas tieši tāpat margin-bottom. Būtībā sākuma mala ir attiecībā pret virzienu, kurā tā plūst. To mēs domājam, runājot par “loģiskām” īpašībām.

Sintakse

margin-inline-end:

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ās pašas vērtības, margin-topkas 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

margin-block-start pieņem vienu garuma vai atslēgvārda vērtību.

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