CSS: Top gegen Margin-Top

Ich bin mir nicht sicher, ob ich den Unterschied zwischen diesen beiden vollständig verstehe.

Kann jemand erklären, warum ich eins über das andere verwenden würde und wie sie sich unterscheiden?

topdient zum Optimieren eines Elements unter Verwendung von positionEigenschaften.
margin-topdient zur Messung des äußeren Abstands zum Element in Bezug auf den vorherigen.

Auch topkann das Verhalten in Abhängigkeit von der Art der Position abweichen, absolute, relativeoder fixed.

Sie würden margin verwenden, wenn Sie ein (Block-) Element von anderen Elementen im Dokumentfluss entfernen möchten. Das heißt, es würde die folgenden Elemente weg / weiter nach unten drücken. Beachten Sie, dass vertikale Ränder benachbarter Blockelemente kollabieren.

Wenn Sie das Element wollte keine Auswirkungen auf die umgebenden Elemente haben, dann würden Sie Positionierung verwenden (abs., Rel.) Und die top, bottom, leftund rightEinstellungen.

Bei der relativePositionierung nimmt das Element weiterhin seinen ursprünglichen Platz ein, wenn es statisch positioniert wird. Deshalb passiert nichts, wenn Sie nur von staticin relativePosition wechseln . Von dort aus können Sie es dann über die umgebenden Elemente schieben.

Mit der absolutePositionierung entfernen Sie das Element vollständig aus dem (statischen) Dokumentenfluss, sodass der belegte Speicherplatz frei wird. Sie können es dann frei positionieren - aber relativ zum nächstbesten nicht statisch positionierten Element, das um es gewickelt ist. Wenn es keine gibt, wird sie auf der gesamten Seite verankert.

Der Rand gilt und erweitert / verkleinert die normale Grenze des Elements. Wenn Sie jedoch top aufrufen, ignorieren Sie die reguläre Position des Elements und verschieben es an eine bestimmte Position.

Beispiel:

html:

<div id="some_element">content</div>

CSS:

#some_element {margin-top: 50%}

Bedeutet, dass das Element HTML auf der 50% -Höhe seines Containers anzeigt (dh das Div, das das Wort "Inhalt" anzeigt, wird auf 50% -Höhe seines enthaltenden Div- oder HTML-Knotens direkt vor div # some_element angezeigt), aber wenn Sie Ihr Element öffnen Wenn Sie den Browser-Inspektor (f12 unter Windows oder cmd + alt + i unter Mac) und die Maus über das Element bewegen, werden die Grenzen hervorgehoben und Sie bemerken, dass das Element nach unten gedrückt und nicht neu positioniert wurde.

Top auf der anderen Seite:

#some_element {top: 50%}

Positioniert das Element tatsächlich neu, was bedeutet, dass es immer noch bei 50% seines Containers angezeigt wird, aber es positioniert das Element neu, sodass seine Kante bei 50% seines enthaltenden Elements beginnt. Mit anderen Worten, es gibt eine Lücke zwischen den Kanten des Elements und seinem Container.

Prost!

Die topEigenschaft ist eine Positionseigenschaft. Es wird mit der positionEigenschaft verwendet, wie z. B. absoluteoder relative. margin-topist die Eigenschaft eines Elements.

aus Bytes:

"Rand ist der Abstand zwischen der Kante der Box eines Elements und der Kante der gesamten Box, z. B. dem Rand eines Buchstabens. 'Oben' verschiebt die Randkante des Elements von der Box mit den enthaltenen Blöcken, z. B. dem gleichen Stück Papier im Inneren ein Karton, aber es ist nicht gegen den Rand des Behälters. "

Mein Verständnis ist, dass Rand oben einen Rand auf dem Element erzeugt und oben die Oberkante des Elements unter die Oberkante des enthaltenden Elements am Versatz setzt.

Sie können es hier versuchen:

http://w3schools.com/css/tryit.asp?filename=trycss_position_top

Ersetzen Sie einfach oben durch Rand oben, um den Unterschied zu sehen.