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 używam jednego nad drugim i czym się różnią?
5 answers
top
jest dla tweak elementem z użyciem właściwości position
.margin-top
służy do pomiaru odległości zewnętrznej od elementu w stosunku do poprzedniego.
Również top
zachowanie może się różnić w zależności od rodzaju pozycji, absolute
, relative
lub fixed
.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-16 16:07:07
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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-23 09:29:27
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.
Zdrówko!Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-14 03:38:52
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ę.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-10-27 18:00:39
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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-11 03:37:43