Ich bin mir nicht sicher, ob ich den Unterschied zwischen diesen beiden völlig verstehe.CSS: Top vs Margin-top
Kann jemand erklären, warum ich einen über den anderen verwenden würden und wie sie sich unterscheiden?
top ist für zwicken ein Element mit der Verwendung von position Eigenschaft.
margin-top ist für die Messung der externen Abstand zum Element, in Bezug auf die vorherige.
Auch top Verhalten kann je nach Art der Position abweichen, absolute, relative oder fixed.
von Bytes:
„Margin ist, dass der Raum zwischen dem Rand einer Box des Elements und dem Rand des gesamten Box, wie beispielsweise den Rand eines Buchstabens‚top‘, um die Randkante des verschiebt Element aus der enthält. Blöcke, wie das gleiche Stück Papier in einer Pappschachtel, aber es ist nicht gegen den Rand des Behälters. "
Mein Verständnis ist, dass margin-top einen Seitenrand auf dem Element erzeugt, und setzt die oben Oberkante des Elements unter dem oberen Rand des umschließenden Elements am Offset.
Sie können es hier versuchen:
http://w3schools.com/css/tryit.asp?filename=trycss_position_top
ersetzen Sie einfach oben mit margin-top den Unterschied zu sehen.
Sie würden Ränder verwenden, wenn Sie ein (Block) Element weg von anderen Elementen in dem Dokumentenfluss bewegen wollen. Das bedeutet, dass es die folgenden Elemente weiter nach unten drücken würde. Beachten Sie, dass vertikale Ränder benachbarter Elemente zusammenbrechen.
Wenn Sie das Element wollte keine Auswirkungen auf die umgebenden Elemente haben, dann würden Sie Positionierung verwenden (abs., Rel.) Und die top, bottom, left und right Einstellungen.
Mit relative Positionierung wird das Element immer noch seinen ursprünglichen Platz als einnehmen, wenn statisch positioniert. Deshalb passiert nichts, wenn Sie einfach von static zu relative Position wechseln. Von dort können Sie es dann über die umgebenden Elemente schieben.
Mit der absolute Positionierung entfernen Sie das Element vollständig aus dem (statischen) Dokumentfluss, sodass der von ihm belegte Speicherplatz freigegeben wird. Sie können es dann frei positionieren - aber relativ zum nächsten besten nicht-statisch positionierten Element, das darum gewickelt ist. Wenn es keine gibt, wird es auf der ganzen Seite verankert.
Margin gilt und verlängert/Verträge über die normale Grenze des Elements, aber wenn man oben rufen Sie ignorieren die reguläre Position des Elements und es in eine bestimmte Position schweben.
Beispiel:
html:
<div id="some_element">content</div>
CSS:
#some_element {margin-top: 50%}
das Element html bei 50% der Höhe des Containers (dh das div das Wort anzeigt beginnt Anzeigemittel "content" würde bei 50% Höhe des enthaltenen div- oder html-Knotens direkt vor div # some_element angezeigt werden, aber wenn Sie den Inspektor Ihres Browsers öffnen (f12 unter Windows oder cmd + alt + i auf dem Mac) und Bewegen Sie die Maus über das Element und Sie werden sehen, dass die Grenzen hervorgehoben sind. Beachten Sie, dass das Element nach unten verschoben wurde, anstatt es neu zu positionieren.
Top auf der anderen Seite:
#some_element {top: 50%}
Wird Neupositionierung tatsächlich das Element bedeutet, dass es immer noch bei 50% des Containers angezeigt werden, aber es wird das Element neu positionieren, um seine Kante bei 50% seines enthaltenden Elements beginnt . Mit anderen Worten, es wird eine Lücke zwischen den Kanten des Elements und seinem Behälter geben.
Prost!
Die top-Eigenschaft ist eine Positionseigenschaft. Es wird mit der position Eigenschaft wie absolute oder relative verwendet. margin-top ist eine Elementeigenschaft.