Margin-top odsuwa div'a, wraz ze swoim potomkiem od topu strony

pytanie zadane 5 lipca 2017 w HTML i CSS przez ajzyn Użytkownik (510 p.)

Witam.

Pewnie to jakiś banalny problem, ale potrafi ktoś mi wyjaśnić dlaczego jak usunę border div-haslo jest odsuwany od góry body, a nie od góry wrapper'a? Tzn. margin-top odsuwa mi div'a, wraz z jego rodzicem od topu strony.
https://jsfiddle.net/rfvfLcew/1/#

Z góry dzięki

komentarz 5 lipca 2017 przez Shaoi Mądrala (7,020 p.)

Poczytaj o załamywaniu marginesów.

2 odpowiedzi

odpowiedź 5 lipca 2017 przez JayJay Mądrala (6,020 p.)
edycja 5 lipca 2017 przez JayJay

W CSS'ie marginesy top i bottom mają tą właściwość, że nakładają się wzajemnie na siebie. Możesz to doskonale zaobserwować na takim przykładzie ("zbadaj" w przeglądarce i zobacz;) ):

<body>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
</body>

.rectangle{
  width: 200px;
  height: 140px;
  background: #ddd;
  margin: 10px;
}
body{
    background-color: #000;
}

W twoim przypadku border "załamuje" ten proces i marginesy nie nałożą się na siebie, jednak gdy go usuniesz wszystko działa zwyczajnie. Natomiast gdybyś dodał np. jakiś tekst wewnątrz div'a to od niego będzie liczony margines.

Poza wspomnianą własnością wynika to z pozycji elementów, która domyślnie dla wszystkich jest statyczna. Jeżeli ustawiłbyś "position:relative" dla "wrappera" i "absolute" dla "haslo" mógłbyś z pomocą właściwości top, left, ... ustawić pozycję "haslo" względem "wrappera". "Wrapper" w skrócie stałby się punktem odniesienia.

komentarz 5 lipca 2017 przez Shaoi Mądrala (7,020 p.)

Jeżeli ustawiłbyś "position:relative" dla "wrappera" i "absolute" dla "haslo" mógłbyś z pomocą właściwości top, left, ... ustawić pozycję "haslo" względem "wrappera". "Wrapper" w skrócie stałby się punktem odniesienia.

Mam nadzieję, iż to był żart, aby w ten sposób rozwiązać 'problem'?

komentarz 5 lipca 2017 przez ajzyn Użytkownik (510 p.)

Dzięki wielkie :)

komentarz 5 lipca 2017 przez ajzyn Użytkownik (510 p.)

Shaoi - zamiast czepiać się mógłbyś lepiej to wytłumaczyć.

komentarz 5 lipca 2017 przez Shaoi Mądrala (7,020 p.)

Nie czepiam się wytłumaczenia, czepiam się przykładu jego rozwiązania.

komentarz 5 lipca 2017 przez JayJay Mądrala (6,020 p.)

Masz rację przykład rozwiązania nie jest idealny.

Jednak uważam, że forum nie jest tylko po to, żeby podać jedno właściwie rozwiązanie danego problemu "informatycznego", ale też wymienić się, pokazać rożne metody rozwiązania tego samego problemu, poradzenia sobie z danym zagadnieniem, jednak przede wszystkim po to aby czegoś się nauczyć. Jak ty byś sobie poradził z tym zagadnieniem?

komentarz 5 lipca 2017 przez Shaoi Mądrala (7,020 p.)
edycja 5 lipca 2017 przez Shaoi

Jednak uważam, że forum nie jest tylko po to, żeby podać jedno właściwie rozwiązanie danego problemu "informatycznego", ale też wymienić się, pokazać rożne metody rozwiązania tego samego problemu, poradzenia sobie z danym zagadnieniem, jednak przede wszystkim po to aby czegoś się nauczyć.

Ty akurat podałeś jedno, a jeżeli ktoś zechce dodać do Twojego przykładu kolejny element, wewnątrz rodzica napotka problem. Oczywiście - można bawić się pozycjonowaniem również i kolejnego elementu, tylko po co?

Kod będzie nam się bezsensownie wydłużał, a przy powiększaniu / zmniejszaniu strony mogą pojawić się problemy z estetyką.

Dlatego też proponuję rozpoczynać udzielanie rozwiązań od najlepszych pod względem modyfikacji.

Jak ty byś sobie poradził z tym zagadnieniem?

Choćby dodając dla rodzica padding-top równy margin-top dziecka.

komentarz 5 lipca 2017 przez JayJay Mądrala (6,020 p.)

Bardzo dziękuję za odpowiedź :)

odpowiedź 5 lipca 2017 przez niezalogowany

Nie bardzo rozumiem Twoje pytanie. Możesz jaśniej?

komentarz 5 lipca 2017 przez imklau Nałogowiec (42,090 p.)

wejdź w kod autora pytania i usuń border z #wrapper to zobaczysz o co chodzi ;)

komentarz 5 lipca 2017 przez niezalogowany

Widzę, myślę nad tym

1	komentarz 5 lipca 2017 przez pablop76 VIP (123,180 p.) Witam. Można również uchronić się przed załamywaniem marginesów nadając display:inline-block; dla rodzica. Elementy float również nie są załamywane. Załamywanie marginesów