Margin-block-start - CSS-triki

margin-block-startĪpašums CSS nosaka summu vietas gar ārējo sākuma 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-start: 25%; writing-mode: vertical-lr; )

Sākuma malu bloka virzienā nosaka elementa writing-mode, directionun text-orientation. Tātad, lietojot margin-block-starthorizontālā kontekstā no kreisās uz labo pusi, tas darbojas tāpat kā margin-topelementa sākuma mala ir tā augšdaļa.

Bet, ja mēs mainām writing-modeuz, teiksim, vertikāli, elements tiek pagriezts, novietojot sākuma malu pa kreisi. Rezultātā margin-block-startizturas tieši tāpat margin-left. 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-start:

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-block-start: 20px; margin-block-start: 2rem; margin-block-start: 25%; /* Keyword values */ margin-block-start: auto; /* Global values */ margin-block-start: inherit; margin-block-start: initial; margin-block-start: unset;