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

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

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

Beigu mala blokā virzienā nosaka elementa writing-mode, directionun text-orientation. Tātad, izmantojot margin-block-endhorizontālā kontekstā no kreisās uz labo pusi, tas darbojas tāpat kā margin-bottomelementa sākuma mala ir tā apakšdaļa.

Bet, ja mēs mainām writing-modeuz, teiksim, vertikāli, elements tiek pagriezts, novietojot gala malu pa labi. Tā rezultātā margin-block-endizturas tāpat kā margin-right. 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-block-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-end pieņem vienu garuma vai atslēgvārda vērtību.

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