Wann und warum Margin Auto in CSS nicht funktioniert
In diesem Beitrag werden wir erklären, wann und warum Margin Auto in CSS nicht funktioniert.
Was ist Margin -Eigenschaft?
CSS “RandDie Eigenschaft wird verwendet, um freien Raum um das Element zu schaffen, das von links, rechts, oben und unten sein könnte. Der definierte Raum findet immer außerhalb des ausgewählten HTML -Elements statt.
Syntax
Rand: Länge | Auto;Der Wert "Länge”Bezieht sich auf den Elementraum, der in REM, PT, PX und in anderen Einheiten angegeben werden kann. Wert "Auto”Ermöglicht dem Browser, den Rand einzustellen.
Um die Margin -Eigenschaft intensiv zu überwinden, können Sie diesen speziellen Artikel überprüfen.
Wann und warum Margin Auto in CSS nicht funktioniert?
Jedes HTML -Element hat standardmäßig einen Anzeigetyp, eines ist “Block", Und der andere ist"im Einklang”. In HTML sind einige Block -Level -Elemente und einige sind standardmäßig Inline -Elemente. Die Elemente der Blockebene haben eine vordefinierte 100% Breite, während Inline -Elemente keine vordefinierte Breite oder Polsterung haben.
Blocktyp -HTML -Element blockieren
Hier in unserer HTML -Datei zwei “ <> Block
Block
Der Anzeigewert als Block wird standardmäßig angewendet auf
Element und es verbraucht die 100% -Breit, wie unten gezeigt:
Jetzt fügen wir die "hinzu"Rand”Eigentum mit“Auto"Wert für unser Blocktypelement
entlang der "Breite" von "50px”:
PBreite: 50px;
Rand: Auto;
Beachten Sie nach dem Speichern des genannten Codes, dass die vordefinierte Breite mit 50px überschrieben wurde und das Margin Auto das Element in das Zentrum angepasst hat:
Lassen Sie uns zu HTML -Elementen vom Typ Inline -Typ gehen.
Inline -Typ HTML -Element
Wie das unten stehende Bild zeigt, dass wir, wenn wir einige Text in Tags deklariert haben, keinen Platz verbraucht haben; Dies liegt nur daran, dass der Inline -Anzeigewert standardmäßig in diesem Element angewendet wurde:
Wenn wir nun die Eigenschaft oder die Marge -Eigenschaft der Breite anwenden, mit automatischem Wert im Span -Element. Infolgedessen finden keine Auswirkungen statt. Denn wenn die Anzeigeinline angewendet wird.
Bonuspipp
Wenn die Anzeigeeigenschaft für ein Element standardmäßig auf Inline eingestellt ist, können Sie sie überschreiben, indem Sie den Wertblock der Anzeigeeigenschaft selbst angeben.
Schauen Sie sich das erklärte Beispiel unten an.
Beispiel
Verwenden wir absichtlich ein Element mit vordefinierten Inline -Wert, wie z. B.:
> Inline
Verwenden Sie im nächsten Schritt die Anzeigeeigenschaft entlang des Wertes “Block”. Stellen Sie die Breite auf 50px und den Rand auf automatisch erklärt:
SpanneBildschirmsperre;
Breite: 50px;
Rand: Auto;
Ausgang
Wir haben darüber ausgearbeitet, wann und warum Margin Auto in CSS nicht funktioniert.
Abschluss
Das Margin -Auto funktioniert nicht mit Elementen, die standardmäßig Inline -Anzeige haben, z. B. Spannweite. Nur die Elemente mit vordefinierter Anzeigeblock funktionieren mit automatischer Margin. Sie können jedoch das Inline -Verhalten eines Elements überschreiben und es sich wie ein Blocktypelement verhalten lassen. In diesem Artikel wurde erläutert, warum und wenn Margin Auto in CSS nicht funktioniert.