CSS - marginauto; - Kuidas see töötab

Kasutamine marginaal: automaatne ploki elemendi horisontaalseks tsentreerimiseks on hästi tuntud meetod. Aga kas te olete kunagi mõelnud, miks või kuidas see toimib? Sellele vastamiseks peame kõigepealt vaatama, kuidas marginaal: auto töötab. Ka segus on see, mida automaatne kui see toimib vertikaalse tsentreerimise ja mõne muu probleemi korral, võib seda teha marginaalides.

Aga esmalt, mis teeb automaatne tegelikult seda teha?

Määratlus automaatne varieerub elemente, elemendi tüübid ja Sisu. Marginaalides, automaatne võib tähendada ühte kahest: võtta kasutatav ruum või 0 px. Need kaks tahet määratleda elemendi erinevad paigutused.

"Automaatne" Olemasoleva ruumi vastuvõtmine

See on kõige tavalisem marginaali kasutamine automaatne me kohtume tihti. Määrates automaatne elemendi vasakule ja paremale servale võtavad nad elementi konteineris oleva horisontaalse ruumi võrdselt - ja seega muutub element keskele.

Kuid see toimib ainult horisontaalsete marginaalide puhul (rohkem miks hiljem) ja ka ei tööta ujutatud ja inline elemendid ja iseenesest ka see ei saa töötada sisse absoluutne ja fikseeritud paigutatud elemendid (me näeme siiski, kuidas neid tööd teha).

Faux Float Võttes kasutatava ruumi

Alates sellest ajast automaatne nii parempoolses kui ka vasakpoolses servas asuvad võrdselt „kättesaadavad“ ruumid, mida te arvate, kui see väärtus on automaatne antakse ainult ühele neist?

Vasak või parem varu koos automaatne võtab kasutusele kõik "kättesaadavad" ruumid, mis muudavad elemendi välimuseks paremale või vasakule.

“automaatne” Arvutatud 0px

Nagu varem mainitud, automaatne ei tööta ujutatud, inline- ja absoluutsetes elementides. Kõik need elemendid on juba olemas otsustas nende paigutuse, seega ei ole kasutamisel mingit kasu automaatne marginaalide jaoks ja ootab, et see keskenduks just niimoodi.

See lüüa algse eesmärgi kasutada midagi sellist ujuda. Seega automaatne nende elementide väärtus on 0px.

automaatne ei tööta ka tüüpilise ploki elemendi puhul, kui sellel ei ole laiust. Kõigil näidetel, mida ma siia näidasin, on laiused.

Väärtuse laius automaatne on 0px marginaalid. Blokielemendi laius katab tavaliselt selle konteineri automaatne või 100% ja seega marginaali automaatne arvutatakse 0px sellisel juhul.

Mis juhtub väärtusega vertikaalsete marginaalidega automaatne?

automaatne nii ülemisel kui ka alumisel serval arvutatakse alati 0px (välja arvatud absoluutsed elemendid). W3C spetsifikatsioon ütleb, et see on selline:

“Kui “margin-top” või “marginaali põhja” on “automaatne”, nende kasutatud väärtus on 0 "

Miks, nii et see on siiani, müsteerium. See võib olla tingitud tüüpilisest vertikaalsest leheküljevoolust, kus lehekülje suurus suurendab kõrgust. Niisiis ei tee elementi tsentreerimine konteineris vertikaalselt selle lehe keskele, erinevalt sellest, kui see on tehtud horisontaalselt (enamikul juhtudel).

Ja võib-olla sellepärast otsustasid nad sama põhjuse tõttu lisada erandi absoluutsetele elementidele, mida saab kogu lehekülje kõrgusele vertikaalselt keskele seada.

See võib olla ka marginaali kokkuvarisemise efekti tõttu (külgnevate elementide kokkuvarisemine)” marginaalid), mis on veel üks erand vertikaalsete marginaalide puhul.

Viimane näib siiski olevat ebatõenäoline - kuna elemendid, mis ei lõika oma marginaale, nagu ujukid ja elemendid koos ülevool muud kui nähtav, omistage veel automaatne.

Absoluutselt paigutatud elementide tsentreerimine

Kuna on täiesti erandlike elementide erand, siis me”Kasutan automaatne väärtust keskele vertikaalselt ja horisontaalselt. Aga enne seda peame leidma, millal marginaal: automaatne tegelikult töötame nagu me tahame, et see oleks täiesti paigutatud elemendis.

Siin asub teine ​​W3C-spetsifikatsioon:

"Kui kõik kolm “vasakule”, “laius”, ja “õigus” on “automaatne”: Kõigepealt seadistage “automaatne” väärtused “marginaal vasakule” ja “marginaali paremale” kuni 0… "

"Kui ükski neist kolmest ei ole “automaatne”: Kui mõlemad “marginaal vasakule” ja “marginaali paremale” on “automaatne”, lahendada võrrand lisapiiranguga, mida kaks marginaali saavad võrdsed väärtused "

See ütleb päris palju horisontaalne automaatne marginaalid haarata võrdseid ruume väärtused vasakule, laius ja õigus ei tohiks olla automaatne , nende vaikeväärtus. Nii et me peame andma neile mingit väärtust absoluutselt paigutatud elemendis. vasakule ja õigus oleks pidanud võrdsed väärtused ideaalse tsentreerimise jaoks.

Spetsifikatsioonis mainitakse ka midagi vertikaalsete marginaalide sarnast.

“Kui kõik kolm “top”, “kõrgus”, ja “põhja” on automaatne, seatud “top” staatilisse asendisse… ”

“Kui ükski neist kolmest ei ole “automaatne”: Kui mõlemad “margin-top” ja “marginaali põhja” on “automaatne”, lahendada võrrand lisapiiranguga, mida kaks marginaali saavad võrdsed väärtused… ”

Seega, et olla absoluutne element vertikaalselt, tema top, kõrgus, ja põhja väärtused ei tohiks olla automaatne.

Nüüd, ühendades kõik need, on see see, mida me”Saad:

Järeldus

Kui te tahate kunagi oma lehel elementi paremale või vasakule loputada, ilma et see sisaldaks järgnevaid elemente (nagu ujuvad), pidage meeles, et on võimalik kasutada automaatne marginaalide puhul.

Elemendi muutmine absoluutseks, nii et see saab vertikaalselt keskele asetada, ei pruugi olla suurepärane idee. Seal on ka teisi võimalusi, nagu flexbox ja CSS transformatsioon, mis on neile sobivamad.