Jak działa margin-top?

Question

Witam, mam pytanie. Jak działa margin top?

Na moje rozumowanie, jeśli ustawię margin-top na 99%, to div powinien ustawić się na sam dół ekranu, ale u mnie w domu np.margin-top: 35% powoduje, że znajdzie się div na samym dole, a u kolegi margin-top:40%. Wiem, że to zależy od wielkości ekranu, ale mógłby mi ktoś wytłumaczyć jak mam tego używać, żeby robić to poprawnie i na większości monitorów element pojawiał się w tym samym miejscu?

Answer 1

Jeżeli chodzi o przyklejenie footera do dnia strony to wcale nie załatwisz tego za pomocą margin-top. Do tego potrzebne będzie ci odpowiednie ustawienie czyli (position [link tutaj]) . Jednym z najprostszych sposobów na ustawienie footera na dole jest dodanie do body pozycji relatywnej i do samego elementu footer pozycji absolutnej. Poczytaj o pozycjonowaniu to od razu zrozumiesz jak go ustawić na dole. 

Główny div - rodzic ustaw na wysokość i szerokość 100%.

Wysokości nie podaje się w %, jednostkami wysokości  są VH.  (więcej tutaj) 

Comments

Stopki nie ustawiam, ale przydatny komentarz. Dzięki ;]

---

To też dotyczy tego co chcesz zrobić ustawianie marginesy górnego na 99% to słaby pomysł.

Answer 2

Główny div - rodzic ustaw na wysokość i szerokość 100%.

Comments

Czyli rozumiem, że mam mieć np. <div id="container> i on na mieć w sobie wszystkie inne? Wtedy margin-top: 99%, będzie działało poprawnie?

---

Nie korzystamy z ID tylko z classy 

Dlaczego? 

Id służy to oznaczenie elementu, który tylko raz pojawia się na stronie. (np przy kotwiczkach) 

Class'ą możesz zaś oznaczyć więcej niż jeden element na stronie i to właśnie dla niej powinieneś ustawiać wartości CSS.