Rezerves bloks - CSS-triki | CSS almanahs 2025

margin-blockir CSS stenogrāfijas rekvizīts, kas nosaka elementa margin-block-startun margin-block-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-block: 30px 60px; writing-mode: vertical-rl; /* Determines the block start direction */ )

Ja vērtība writing-modeir iestatīta uz horizontal-lr, margin-blockīpašums darbosies tāpat kā iestatīšana margin-topun margin-bottom. 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) bloķēšanas virziena piemales.

Mainiet elementu writing-modeuz kaut ko līdzīgu, vertical-lrun apakšējā mala tiek pagriezta vertikālā virzienā, darbojoties vairāk kā margin-leftun margin-rightīpašības.

Sintakse

margin-block: (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-blockjutīsities ļoti pazīstams. Vienīgā atšķirība ir tā, ka tā darbojas divos virzienos, nevis četros.

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