CSS: Top vs Margin-top

Użyjesz marginesu, jeśli chcesz przenieść element (blok) z dala od innych elementów w obiegu dokumentów. Oznacza to, że odepchnie następujące elementy od / dalej w dół. Należy pamiętać, że pionowe marginesy sąsiednich elementów zapadają się.

Jeśli chcesz, aby element nie miał wpływu na otaczające elementy, użyjesz pozycjonowania (abs., rel.) i top, bottom, left i right ustawienia.

Z pozycjonowaniem relative element będzie nadal zajmował swoją pierwotną przestrzeń, tak jak wtedy, gdy ustawione statycznie. Dlatego nic się nie dzieje, jeśli po prostu przełączysz się z pozycji static na relative. Stamtąd można następnie wsadzić go w otaczające elementy.

Z pozycjonowaniem absolute, całkowicie usuniesz element z (statycznego) przepływu dokumentów, dzięki czemu zwolni on zajmowane miejsce. Następnie można ustawić go swobodnie - ale względnie do następnego najlepiej nie statycznie umieszczonego elementu owiniętego wokół niego. Jeśli nie ma, będzie zakotwiczony w całości strona.

Margin stosuje i rozszerza / kontraktuje normalną granicę elementu, ale gdy wywołujesz top, ignorujesz regularną pozycję elementu i przenosisz ją do określonej pozycji.

Przykład:

Html:

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

Css:

#some_element {margin-top: 50%}

Oznacza, że element zacznie wyświetlać html na wysokości 50% swojego kontenera (tzn. div wyświetlający słowo "content" będzie wyświetlany na wysokości 50% swojego zawierającego div lub węzeł html bezpośrednio przed div#some_element), ale jeśli otwierasz Inspektora przeglądarki (f12 w systemie Windows lub cmd + alt + i na mac) i najeżdżasz myszką na element, zobaczysz jego granice podświetlone i zauważysz, że element został przesunięty w dół, a nie przesunięty.

Góra z drugiej strony:

#some_element {top: 50%}

Zmieni pozycję elementu, co oznacza, że nadal będzie wyświetlany w 50% kontenera, ale zmieni pozycję elementu, tak aby jego krawędź zaczynała się od 50% elementu zawierającego element. Innymi słowy, będzie przerwa między krawędziami element i jego Pojemnik.

From bytes:

"margines to przestrzeń między krawędzią pola elementu a krawędzią całego pola, np. marginesu litery. "Góra" wypiera krawędź marginesu elementu z pudełka zawierającego bloki, takiego jak ten sam kawałek papieru w kartonowym pudełku, ale nie znajduje się on Przy krawędzi pojemnika."

Rozumiem, że margin-top tworzy margines na elemencie, a top ustawia górną krawędź elementu poniżej górnej krawędzi elementu zawierającego element na offsecie.

Możesz spróbować tutaj:

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

Wystarczy zastąpić top margin-top, aby zobaczyć różnicę.

Właściwość top jest właściwością position. Jest on używany z właściwością position, taką jak absolute lub relative. margin-top jest własnością elementu.