Når og hvorfor margin Auto ikke fungerer i CSS
I dette innlegget vil vi forklare når og hvorfor Margin Auto ikke fungerer i CSS.
Hva er margineiendommer?
CSS “margin”Eiendom brukes til å skape ledig plass rundt elementet, som kan være fra venstre, høyre, topp og bunn. Det definerte rommet foregår alltid utenfor det valgte HTML -elementet.
Syntaks
Margin: Lengde | bil;Verdien "lengde”Henviser til marginen til elementer, som kan spesifiseres til REM, PT, PX og i andre enheter. Verdi "bil”Lar nettleseren justere marginen.
For å oversikt over marginegenskapen dypt, kan du sjekke ut denne dedikerte artikkelen.
Når og hvorfor margin Auto ikke fungerer i CSS?
Hvert HTML -element har en visningstype som standard, ett er "blokkere”, Og den andre er“på linje”. I HTML er noen elementer på blokknivå, og noen er inline elementer som standard. Blokkernivåelementer har forhåndsdefinert 100% bredde, mens inline elementer ikke har noen forhåndsdefinert bredde eller polstring.
Blokk type HTML -element
Her i HTML -filen vår, to “ <> Blokk
Blokkere
Visningsverdien som blokkering vil bli brukt som standard til
element og det vil konsumere 100% bredde som vist nedenfor:
La oss nå legge til "margin”Eiendom med“bil”Verdi til vårt blokkeringstypeelement
ved "bredde”Av“50px”:
PBredde: 50px;
Margin: Auto;
Etter å ha lagret den nevnte koden, må du legge merke til at den forhåndsdefinerte bredden er blitt overstyrt med 50px og margin Auto har justert elementet inn i sentrum:
La oss gå videre mot HTML -elementer på inline type HTML.
Inline type HTML -element
Som bildet nedenfor viser at når vi har erklært noen tekst innen tagger, konsumerte de ikke noe rom; Det er bare fordi den inline visningsverdien har blitt brukt som standard på dette elementet:
Nå, hvis vi vil bruke breddeegenskapen eller marginegenskapen med bilverdi på spennelementet. Som et resultat vil ingen effekter finne sted. For når skjermbildet brukes, gjør det at elementet bare bruker plassen som finnes i dets tagger.
Bonus tips
Hvis visningsegenskapen for et element er satt til å inline som standard, kan du overstyre den ved å spesifisere verdiblokken til visningsegenskapen selv.
Ta en titt nedenfor på det forklarte eksemplet.
Eksempel
La oss med vilje bruke et element med forhåndsdefinert inline -verdi, for eksempel:
> Inline
I neste trinn, bruk visningsegenskapen langs verdien “blokkere”. Sett bredden til 50px og margin til auto som forklart:
SpanDisplay: Block;
Bredde: 50px;
Margin: Auto;
Produksjon
Vi har utdypet når og hvorfor Margin Auto ikke fungerer i CSS.
Konklusjon
Margin Auto fungerer ikke med elementer som har inline display som standard, for eksempel Span. Bare elementene med forhåndsdefinert skjermblokkarbeid med automatisk margin. Imidlertid kan du overstyre den inline oppførselen til et element og få den til å oppføre seg som et blokktypeelement. Denne artikkelen diskuterte hvorfor og når Margin Auto ikke fungerer innen CSS.