CSS margin:auto - Hvordan virker det? En komplet guide til brug af negative marginer i CSS.

At bruge margin:auto til at centrere et blokelement horisontalt er en velkendt teknik. Men har du nogensinde spekuleret på, hvordan det fungerer?

Effekten af auto afhænger af elementtypen og konteksten. Til toppolstring CSS auto kan betyde en af to ting: Tag alt Fri plads eller 0 pixels. Afhængigt af dette vil en anden struktur blive specificeret.

"auto" - optager al tilgængelig plads

Dette er den mest almindelige måde at bruge auto til indrykning. Hvis vi indstiller auto for venstre og højre polstring af et element, vil de jævnt optage al den vandrette plads, der er til rådighed i containeren. Dette vil placere elementet i midten.

Se eksempel

Dette virker kun til vandret polstring. Men vil ikke fungere for flydende og inline elementer. Og også til absolut og fast placerede elementer.

Simuler flydende adfærd ved at allokere ledig plads

auto fordeler al ledig plads ligeligt mellem højre og venstre margen. Men hvad sker der, hvis vi indstiller denne værdi for kun én af polstringerne? Så vil det optage al den tilgængelige plads, og elementet vil blive forskudt til højre eller venstre kant.

Se eksempel

"auto" - indstil 0 pixels

Som nævnt ovenfor virker auto ikke for flydende, inline eller absolut placerede elementer. De har allerede en struktur defineret, så det nytter ikke noget at bruge margin auto.

Dette vil kun forstyrre den oprindelige struktur. Herunder CSS til indrykning af tekst øverst. Derfor vil auto indstille polstringen af disse elementer til 0 pixels.

auto virker heller ikke for standard blokelement, hvis der ikke er angivet en bredde for det. I alle de eksempler, jeg gav, havde elementerne en angivet bredde.

Værdien auto vil definere en polstring på 0 pixels, når bredden af et blokelement er indstillet til auto eller 100 % . Typisk fylder den hele beholderens bredde, så der vil være 0 pixels tilbage til polstringsbredden.

Hvad sker der med lodret polstring, når den er indstillet til auto?

auto for både CSS toppolstring og bundpolstring beregnes altid som 0 pixels ( ekskl. absolut placerede elementer). W3C-specifikationen angiver følgende:

"Hvis 'margin-top' eller 'margin-bottom' er sat til 'auto', er de sat til 0."

Det skyldes, at på en webside er alle elementer oftest fordelt lodret. Ved at centrere en elementhøjde i en beholder opnår vi derfor ikke, at den vil fremstå lodret centreret i forhold til selve siden, som det sker ved vandret centrering.

Eller måske er det af samme grund, at de besluttede at tilføje en undtagelse for absolut placerede elementer, der kan centreres lodret i forhold til den samlede sidehøjde.

Eller fordi effekten af at kombinere indrykninger (flette indrykninger af tilstødende elementer). Dette er endnu en undtagelse fra af denne regel bestemmelse af lodrette forskydninger.

Centrering af absolut placerede elementer

Da der er en undtagelse for absolut placerede elementer, kan du bruge auto til at centrere dem lodret og vandret. Men først skal vi finde ud af, hvornår margin:auto vil fungere præcis sådan for CSS-toppolstring.

En anden W3C-specifikation siger:

"Hvis alle tre positioner ("venstre", "bredde" og "højre") er indstillet til "auto", skal du først indstille "margin-venstre" og "margen-højre" til 0...
» Hvis "auto" kun er angivet for "margin-left" og "margin-right", så løs ligningen med yderligere betingelse så begge polstringer har samme bredde."

Situationen vedrørende autoværdien for vandret polstring er beskrevet mere detaljeret her. For at sikre, at disse polstringer har samme størrelse, bør venstre , bredde og højre ikke indstilles til auto ( deres standardværdi). For at centrere et element vandret skal du indstille bredden af det absolut placerede element til en bestemt værdi, og venstre og højre skal have ens værdier.

I specifikationen også nævnt noget lignende for den øverste polstring af CSS div.

"Hvis 'top', 'højde' og 'bund' er indstillet til 'auto', skal du indstille 'top' til statisk..."

"Hvis en af de tre positioner ikke er indstillet til 'auto': Hvis 'top' og 'bund' er sat til 'auto', løs ligningen med en yderligere betingelse for at sætte disse polstringer til de samme værdier."

For at centrere et absolut positioneret element lodret må top , højde og bund derfor ikke indstilles til auto .

Når vi nu sætter alt dette sammen, får vi følgende:

Se eksempel

Konklusion

Hvis du skal flytte et element på en side til højre eller venstre uden containerelementer ( for eksempel som i tilfældet med float), husk at du kan bruge auto til indrykning.

Konvertering af et element til absolut positioneret kun for at centrere det lodret ( top polstring CSS), Ikke bedste idé. Der er andre muligheder såsom flexbox og CSS transform, der er bedre egnet til dette.

Oversættelse af artiklen " CSS – margin auto – Sådan fungerer det"blev forberedt af det venlige projektteam.

God dårlig

14. juni 2011 kl. 17.48

Lad os tale om margin, aka margin (del 1)

Da jeg så, når begyndere, mens de lægger ud side efter side, laver en masse fejl, indrykker marginer og ikke helt forstår, hvordan netop denne margen faktisk fungerer, besluttede jeg at skrive denne artikel.

Det vil helt sikkert være nyttigt for begyndende layoutdesignere, men jeg tvivler på det for fagfolk, da en person, der har været involveret i layout i flere år, allerede er forpligtet til at "memorere" alle funktionerne i denne ejendom udenad.

I denne del af artiklen vil jeg skrive om den lodrette margin. Vi vil tale om vandret i næste del.

Lad os til at begynde med kort se på, hvilke måleenheder der findes, hvad de betyder, og hvilke marginer der skal bruges til indrykning.

Cm, mm, tomme, pc, pkt – absolutte enheder målinger. Anbefales til brug ved udskrivning af dokumenter.

Px, em, ex, % - relative enheder, bruges til skærme.

Til margin bruger jeg px Og % , A em– for at angive skriftstørrelser. Ex (i IE ex = em / 2) – Jeg anbefaler ikke at bruge det, fordi det tolkes forskelligt i hver browser.

Og generelt, i hvilken enhed vil du angive indrykning eller skriftstørrelse: browseren konverterer alt til pixels uden at tage hensyn til visningsområdet.

Visningsområdet er det sted, hvor brugeren ser indholdet af webstedet uden at rulle på skærmen. Det er forskelligt for hver bruger.

Enhver layoutdesigner ved, at ethvert element kan repræsenteres i form af 4 områder (margin, kant, polstring og indhold).

Margin – margen. Konstruktionen af marginer er forskellig lodret og vandret.

Som jeg allerede skrev ovenfor, kan dimensionerne for marginen indstilles i em, ex, px - en stiv indstilling, og i % - de beregnes i forhold til et eller andet område.

Jeg vil give et eksempel på en af de almindelige fejl begået af begyndende layoutdesignere.

Der er 2 divs: første og anden div.

#først(
polstring: 100px;
baggrund: #b5bcbc;
}
#anden(
højde: 100px;
baggrund: #b06b48;
margin: 30% 0 0;
}

Bemærk venligst, at jeg ikke har sat egenskaben width til nogen div (vi taler om dette senere). Nu er vi kun interesseret i marginen, som er lig med margin: 30% 0 0;

Jeg håber, at alle ved, hvordan margin betragtes i I dette tilfælde, for en sikkerheds skyld, lad mig minde dig om, at det beregnes med uret, dvs.: marginen øverst vil være 30%, til højre - 0, nederst - 0 og til venstre - da jeg ikke har angivet noget , tager marginen værdien af den modsatte side, det vil sige, i dette tilfælde, hvis marginen til højre er 0, så er marginen til venstre, hvis den ikke er angivet, også 0.

Men nu er vi interesseret i marginen, som er lig med 30 %, også kendt som topindrykningen. Hvor kommer disse 30% fra?

Mange mennesker tror og tror forkert, at 30% er taget fra toppen af hele siden.

Men dette er ikke sandt!

Da den anden div i dette tilfælde er indlejret i den første div, så vil margin-top:30% blive beregnet i forhold til bredden af den overordnede div sekund, det vil sige i forhold til bredden af den første div!

I dette tilfælde er bredden af den første div automatisk som standard, så div'en tager al den ledige plads i bredden, og fra denne bredde beregnes 30% margin toppen for den anden div.

Når den overordnede div gøres mindre, vil den øverste polstring af den anden div også blive reduceret.

Margin kan også være negativ. I dette tilfælde tillader elementet lodret et andet element at "ride" på sig selv eller "bevæge sig ned" ud over dets containers grænser.

For eksempel: to divs, der ligger under hinanden.

hvis vi tilføjer margin-bottom: -100px til den første div, og margin-top: -50px til den anden
#først(
højde: 200px;
baggrund: #69c;
margen: 0 0 -100px;
}
#anden(
højde: 200px;
baggrund: #f60;
margin: -50px 100px 0;
}

Så vil følgende ske.

Men... det er her den store fejl, nybegyndere begår.

Mange mennesker tror, at da den øverste div har en margin bund på -100px, og den nederste div, margin top -50px, så vil den nederste div "overstyre" den øverste en med -150px.

Hvis margener er af samme navn (begge marginer er enten negative eller positivt tal), så er det i dette tilfælde taget stort antal modulo, og der tages ikke højde for mindre.

I dette tilfælde vil den nederste div overlappe den øverste div med 100px, og 50px vil ikke blive taget i betragtning.

Det samme gælder for positive marginer, den nederste div vil "bevæge sig" væk fra den øverste med 100px, og 50px vil ikke blive taget i betragtning.

Overvej følgende eksempel.
Der er 2 divaer, den ene under den anden.

#først(
højde: 200px;
baggrund: #69c;
margen: 0 0 -100px;
}
#anden(
højde: 200px;
baggrund: #f60;
margen: 50px 100px 0;
}

Først
anden

Som du kan se, er margenbunden af den første negativ, og marginen toppen af den anden er positiv, hvad vil der ske i denne situation?

For modsatte marginer vil addition forekomme, det vil sige: -100 + 50 = -50. Følgelig vil den nederste div rykke 50px op.

To divs, den ene indlejret i den anden.

#først(
baggrund: #b5bcbc;
}
#anden(
højde: 200px;
baggrund: #b06b48;
}

Hvis du tilføjer en margentop på 200px til den indre div,
#anden(
højde: 200px;
baggrund: #b06b48;
margin-top: 200px;
}

Nå, her er endnu en fejl! Nogle mennesker mener, at den indre margen skal "flytte" 200px ned fra sin forælder, mens dens forælder vil forblive på plads og derved strække sig.

Men uanset hvordan det er!

Hvis det overordnede element ikke har begrænsende faktorer (jeg vil skrive om disse faktorer nedenfor), så flyttes marginen fra det interne element til det eksterne. Så ved gammel ordning en margin er valgt: hvis de har samme navn, så vælges den større, hvis de er modsat, så sker addition.
Og resultatet

Men hvad nu, hvis vi ikke har brug for dette og ønsker, at den overordnede div skal forblive på sin plads, og at den underordnede div flytter 200px ned?

Du kan annullere denne handling i forhold til forælderen; der er flere måder.
1. tildele polstring til den overordnede blok
2. Indstilling af grænse til den overordnede blok
3. indstilling af overløb til den overordnede blok, enhver værdi undtagen synlig (virker overalt undtagen gamle IE)
Og voila

Tak for din opmærksomhed, jeg håber, jeg var i stand til at afklare for begyndere, hvad margin er, og hvordan man beregner det korrekt og hvorfra.
Hvis artiklen var nyttig, og du vil læse fortsættelsen, så vil jeg i næste del beskrive vandrette marginer. Ting der er ikke så enkle, som de ser ud ved første øjekast ;)

Der er flere synspunkter på brugen negative marginer i CSS, både skarpt negativ og rent positiv.

Negativt felt i CSS regel som følger:

CSS

#content (margin-left:-100px;)

Negative felter bruges normalt i små doser, men som du vil se senere, kan de mere. Der er et par ting, du skal vide om negative marginer (for at undgå tastefejl):

Gyldighed i css
W3C fortæller os: "Negative værdier for margin egenskaber det er tilladt at bruge." Flere detaljer på www.w3.org/TR/CSS2/box.html#margin-properties
Negative marginer er ikke HACK
Dette kommer fra misforståelser og fra ydre påvirkning negativ margin til layout. Den eneste gang en negativ margin kan blive et hack, er når du forsøger at rette en fejl i din kode ved hjælp af en negativ margin.
Indvirkning på flow
Negative margener bryder ikke flow, når de anvendes på "ikke-svævende" elementer. Det vil sige, at hvis du bruger en negativ margin til at skubbe et element op, så vil alle efterfølgende elementer også blive skubbet op.
Forskellig reaktion, når den bruges sammen med float
Negative margener er stadig ikke dagligdags CSS, så du bør bruge sådanne marginer med forsigtighed.
Nogle problemer dreamweaver
Der er ikke noget at diskutere her.
Fuld kompatibilitet
Negative margener understøttes af alle browsere, inklusive IE6.

Arbejde med negative marginer (margin)

Negative margener er meget stærke, når de bruges korrekt.

Billedet viser hvordan statisk element reagerer på negative felter.

Når et statisk element modtager en negativ top/venstre margin, "bevæger" elementet sig i den angivne (øverste/venstre) retning.
CSS
/* Element flyttes 10px op */ #mydiv1 (margin-top:-10px;)
Men hvis du bruger det til ned/højre, så vil elementet ikke bevæge sig i ned/højre retning, som du antager. I stedet vil dette skubbe det efterfølgende element ind i hovedelementet og overlappe det.
CSS
/* Alle efterfølgende elementer bag #mydiv1 vil rykke op 10px, men #mydiv1 selv vil ikke flytte */ #mydiv1 (margin-bottom:-10px;)
Hvis et element ikke har en bredde specificeret, så vil brug af en negativ margin i venstre/højre retning skubbe elementet i begge retninger, efterhånden som elementets bredde øges.
CSS
#mydiv1(margin:0 auto -20px; højde: 150px; /*...*/) #mydiv2(margin:0 auto; højde: 150px; /*...*/)

Negativ margin for flydende elementer

Overvej følgende markering:

HTML

Først

Anden

Hvis en negativ margen påføres et flydende element, skaber det plads, der får indholdet til at overlappe. Dette er fantastisk til flydende layouts, hvor den ene søjle er 100% bred og den anden søjle er f.eks. fast bredde ved 100px.
CSS
#mydiv1 (float:venstre; margin-right:-100px;)
Hvis begge elementer er float:left, og #mydiv1 har margin-right:-20px, så behandler #mydiv2 #mydiv1, som om den var 20px mindre end dens faktiske bredde (og dermed overlapper den). Interessant nok reagerer #mydiv1-indholdet ikke på disse manipulationer og bevarer sin nuværende bredde.
Hvis den negative margin er lig med den faktiske bredde, vil overlapningen være fuldstændig. Dette sker, fordi marginer, polstring, kanter og bredde føjes til den faktiske bredde af elementet. Så hvis den negative margin er lig med den samlede bredde af alle ovenstående egenskaber, så bliver elementets faktiske bredde 0.

Effektive teknikker baseret på brug af negativ margin

Lige siden vi lærte, at der er et negativt felt gyldig kode, flere nyttige CSS tekniker baseret på denne teknik.

Hvis du har en liste med så mange elementer, at det ikke giver mening at vise dem lodret, hvorfor så ikke dele listen op i tre kolonner?

Negative marginer vil håndtere dette uden brug af yderligere tags eller float-egenskaben. Det er utroligt, hvor nemt det er at opdele en liste i tre kolonner, sådan her:

HTML

Æg
skinke
Brød
Smør
Mel
Fløde

Cm, mm, tomme, pc, pkt– absolutte måleenheder. Anbefales til brug ved udskrivning af dokumenter.

Px, em, ex, %- relative enheder, der bruges til monitorer.

Til margin bruger jeg px Og % , A em– for at angive skriftstørrelser. Ex (i IE ex = em / 2) – Jeg anbefaler ikke at bruge det, fordi det tolkes forskelligt i hver browser.

Og generelt, i hvilken enhed vil du angive indrykning eller skriftstørrelse: browseren konverterer alt til pixels uden at tage hensyn til visningsområdet.

Visningsområdet er det sted, hvor brugeren ser indholdet af webstedet uden at rulle på skærmen. Det er forskelligt for hver bruger.

Enhver layoutdesigner ved, at ethvert element kan repræsenteres i form af 4 områder (margin, kant, polstring og indhold).

Margin – udvendig indrykning. Konstruktionen af marginer er forskellig lodret og vandret.

Som jeg allerede skrev ovenfor, kan dimensionerne for marginen indstilles i em, ex, px - en stiv indstilling, og i % - de beregnes i forhold til et eller andet område.

Jeg vil give et eksempel på en af de almindelige fejl begået af begyndende layoutdesignere.

Der er 2 divs: første og anden div.

#først(
polstring: 100px;
baggrund: #b5bcbc;
}
#anden(
højde: 100px;
baggrund: #b06b48;
margin: 30% 0 0;
}

Bemærk venligst, at jeg ikke har sat egenskaben width til nogen div (vi taler om dette senere). Nu er vi kun interesseret i marginen, som er lig med margin: 30% 0 0;

Jeg håber, at alle ved, hvordan marginen beregnes i dette tilfælde, bare hvis jeg vil minde dig om, at den beregnes med uret, dvs.: den øverste margin vil være 30%, den højre - 0, den nederste - 0 og venstre - da jeg ikke har angivet noget, så tager marginen værdien af den modsatte side, det vil sige, i dette tilfælde, hvis marginen til højre er 0, så er marginen til venstre, hvis den ikke er angivet, også 0.

Men nu er vi interesseret i marginen, som er lig med 30 %, også kendt som topindrykningen. Hvor kommer disse 30% fra?

Mange mennesker tror og tror forkert, at 30% er taget fra toppen af hele siden.

Men dette er ikke sandt!

Når den overordnede div gøres mindre, vil den øverste polstring af den anden div også blive reduceret.

Margin kan også være negativ. I dette tilfælde tillader elementet lodret et andet element at "ride" på sig selv eller "bevæge sig ned" ud over dets containers grænser.

For eksempel: to divs, der ligger under hinanden.

Så vil følgende ske.

Men... det er her den store fejl, nybegyndere begår.

Mange mennesker tror, at da den øverste div har en margin bund på -100px, og den nederste div, margin top -50px, så vil den nederste div "overstyre" den øverste en med -150px.

Hvis marginerne er af samme navn (begge marginer eller et negativt eller positivt tal), så tages i dette tilfælde det store absolutte tal, og det mindste tages ikke i betragtning.

I dette tilfælde vil den nederste div overlappe den øverste div med 100px, og 50px vil ikke blive taget i betragtning.

Det samme gælder for positive marginer, den nederste div vil "bevæge sig" væk fra den øverste med 100px, og 50px vil ikke blive taget i betragtning.

Overvej følgende eksempel.
Der er 2 divaer, den ene under den anden.

#først(
højde: 200px;
baggrund: #69c;
margen: 0 0 -100px;
}
#anden(
højde: 200px;
baggrund: #f60;
margen: 50px 100px 0;
}

Først
anden

Som du kan se, er margenbunden af den første negativ, og marginen toppen af den anden er positiv, hvad vil der ske i denne situation?

For modsatte marginer vil addition forekomme, det vil sige: -100 + 50 = -50. Følgelig vil den nederste div rykke 50px op.

To divs, den ene indlejret i den anden.

#først(
baggrund: #b5bcbc;
}
#anden(
højde: 200px;
baggrund: #b06b48;
}

Hvis du tilføjer en margentop på 200px til den indre div,
#anden(
højde: 200px;
baggrund: #b06b48;
margin-top: 200px;
}

Hvis det overordnede element ikke har begrænsende faktorer (jeg vil skrive om disse faktorer nedenfor), så flyttes marginen fra det interne element til det eksterne. Derefter vælges en margen i henhold til det gamle skema: hvis de har samme navn, så vælges den større, hvis de er forskellige, sker der tilføjelse.
Og resultatet

Men hvad nu, hvis vi ikke har brug for dette og ønsker, at den overordnede div skal forblive på sin plads, og at den underordnede div flytter 200px ned?