CSS margin-block ominaisuus

Edellinen sivu margin
Seuraava sivu margin-block-end

Määrittely ja käyttö

margin-block Ominaisuus määrittää lohko-akselin alkuperä- ja loppureunuserin marginauksen, ja se on seuraavien ominaisuuksien lyhennys:

margin-block-start
margin-block-end

margin-block Ominaisuuden arvo voidaan asettaa eri tavoin:

Jos margin-block-ominaisuudella on kaksi arvoa:

margin-block: 10px 50px;

Reunuserin marginauksen leveys on 10px
Loppureunat ovat 50px

Jos margin-block-ominaisuudella on arvo:

margin-block: 10px;

Alku- ja loppureunat ovat 10px

CSS:n margin-block ja margin-inline Ominaisuudet ovat CSS:n margin-top,margin-bottom,margin-left ja margin-right Ominaisuudet ovat erittäin samanlaisia, mutta margin-block ja margin-inline Ominaisuus riippuu suunnasta ja suunnasta.

Huomaa:liittyviin CSS-ominaisuuksiin writing-mode Määrittää suunnan. Tämä vaikuttaa alueen alkuperäiseen ja lopulliseen sijaintiin sekä margin-block Ominaisuuden vaikutus. English-sivuille, suunta on alas ja suunta on vasemmalta oikealle.

Esimerkki

Esimerkki 1

Aseta ulkoreunat suuntaan.

div {
  margin-block: 35px;
}

Kokeile itse

Esimerkki 2

Kun <div>-elementin writing-mode Kun attribuutin arvo on vertical-rl, elementin alkuperäinen sijainti siirtyy ylältä oikealle ja lopullinen sijainti alalta vasemmalle. Writing-mode-muutokset vaikuttavat myös margin-blockin vaikutukseen:

#parentDiv {
  writing-mode: vertical-rl;
}
#myDiv {
  margin-block: 10px 50px;
}

Kokeile itse

CSS-kieli

margin-block: auto|length|initial|inherit;

Ominaisuuden arvo

Arvo	Kuvaus
auto	Oletusarvo. Elementin oletus margin-block-arvo.
length	Määritä margin-block px, pt, cm ym. yksiköillä. Sallitaan negatiiviset arvot. Katso:CSS yksiköt.
%	Määritä margin-block, joka on suhteessa vanhemman elementin rivin suuntaan kokoon prosentteina.
initial	Aseta tämä ominaisuus sen oletusarvon arvoon. Katso: initial.
inherit	Perii tämän ominaisuuden vanhemmalta elementiltään. Katso: inherit.