CSS: Top vs Margin-top

Nie jestem pewien, czy w pełni rozumiem różnicę między tymi dwoma.

Czy ktoś może wyjaśnić, dlaczego miałbym używać jednego nad drugim i czym się różnią?

topsłuży do modyfikowania elementu za pomocą positionwłaściwości.
margin-topsłuży do pomiaru odległości zewnętrznej do elementu w stosunku do poprzedniego.

Ponadto topzachowanie może się różnić w zależności od typu pozycji absolute, relativelub fixed.

Użyłbyś marginesu, gdybyś chciał przenieść element (blok) z dala od innych elementów w przepływie dokumentu. Oznacza to, że odepchnąłby następujące elementy od / dalej w dół. Należy pamiętać, że pionowe marginesy sąsiednich elementów blokowych zwijają się.

Jeśli chciał element się nie mieć wpływu na otaczające elementy, można użyć pozycjonowania (abs., Rel.) I top, bottom, lefti rightustawienia.

W przypadku relativepozycjonowania element nadal będzie zajmował swoją pierwotną przestrzeń, tak jak podczas pozycjonowania statycznego. Dlatego nic się nie dzieje, jeśli po prostu przełączyć się staticdo relativepozycji. Stamtąd możesz następnie popchnąć go w poprzek otaczających elementów.

Dzięki absolutepozycjonowaniu całkowicie usuwasz element ze (statycznego) przepływu dokumentów, aby zwolnić zajmowaną przez niego przestrzeń. Możesz wtedy dowolnie pozycjonować - ale względem następnego najlepszego, niestatycznie umieszczonego elementu, owiniętego wokół niego. Jeśli go nie ma, zostanie zakotwiczony na całej stronie.

Margines stosuje się i rozszerza / zmniejsza normalną granicę elementu, ale gdy wywołujesz top, ignorujesz zwykłą pozycję elementu i unosząc go 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 50% wysokości swojego kontenera (tzn. Div wyświetlający słowo "content" będzie wyświetlany na 50% wysokości jego zawierającego div lub html węzła bezpośrednio przed div # some_element), ale jeśli otworzysz inspektor przeglądarki (f12 w Windows lub cmd + alt + i na Mac) i najedź myszką na element, zobaczysz jego granice podświetlone i zauważysz, że element został przesunięty w dół, a nie przeniesiony.

Z drugiej strony:

#some_element {top: 50%}

W rzeczywistości zmieni położenie elementu, co oznacza, że ​​nadal będzie wyświetlany na 50% swojego pojemnika, ale zmieni położenie elementu, tak aby jego krawędź zaczynała się na 50% elementu zawierającego. Innymi słowy, między krawędziami elementu a jego pojemnikiem będzie szczelina.

Twoje zdrowie!

topNieruchomość jest własnością pozycja. Jest używany z positionwłaściwością, taką jak absolutelub relative. margin-topjest własnością elementu.

z bajtów:

„Margines” to odstęp między krawędzią pola elementu a krawędzią całego pola, na przykład margines litery. „Góra” przesuwa krawędź marginesu elementu z pola zawierającego bloki, na przykład ten sam kawałek papieru w środku pudełko kartonowe, ale nie opiera się o krawędź 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 w przesunięciu.

możesz spróbować tutaj:

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

po prostu zamień górę na margines, aby zobaczyć różnicę.