• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Górny margines dany dla <section> przesuwa <article> w którym się znajduje

VPS Starter Arubacloud
0 głosów
265 wizyt
pytanie zadane 19 grudnia 2017 w HTML i CSS przez WojtexGamer Początkujący (370 p.)

<main>
   <article>
        <section>
           <h1>Naglowek</h2>
            <p>
            Lorem lorem lorem lorem
            </p>
        </section>
   </article>
</main>



article{
width:80%;
margin: auto;}

section{
width:90%;
margin: 50px auto;}

 

Dlaczego margin-top działa na article zamiast na section który znajduje sie w article?

komentarz 19 grudnia 2017 przez pablop76 VIP (123,240 p.)

W którym miejscu ?

<main>
<article>
<section>
<h1>Naglowek</h2>
<p>
Lorem lorem lorem lorem
</p>
</section>
</article>
</main>
article{
width:80%;
margin: auto;
border: 1px solid red;}

section{
width:90%;
margin: 50px auto;
border: 1px solid blue;}

 

komentarz 19 grudnia 2017 przez WojtexGamer Początkujący (370 p.)
Zamiast przesuwac section to przesuwa caly article

Teraz czytam o collapsingu
komentarz 19 grudnia 2017 przez pablop76 VIP (123,240 p.)
No właśnie ja tego nie widzę. <section> dostaje margin: 50px auto; względem <article> tak jak ostylowałeś.
komentarz 19 grudnia 2017 przez WojtexGamer Początkujący (370 p.)
No tak powinno być, tylko że article dostaje tego marginesa a nie section
komentarz 19 grudnia 2017 przez pablop76 VIP (123,240 p.)
kliknij ikonkę codepen nad moim kodem. Niebieskie obramowanie to section. I co widać?
komentarz 19 grudnia 2017 przez WojtexGamer Początkujący (370 p.)
Dobra, po dodaniu bordera margin zaczął działać. To jest rozwiązanie? Czy po prostu dodałeś nieświadomie?
komentarz 19 grudnia 2017 przez pablop76 VIP (123,240 p.)
edycja 19 grudnia 2017 przez pablop76

margin collapsing  działa przez natywne style h1,p,body. Wyzeruj  (poczytaj o resecie stylów)

style dla tych elementów.

komentarz 19 grudnia 2017 przez WojtexGamer Początkujący (370 p.)
Spk, dzięki
komentarz 19 grudnia 2017 przez pablop76 VIP (123,240 p.)
Ale Schizohatter miał rację. Jak zresetujesz style a potem będziesz ustawiał style dla h1 i p to znowu napotkasz ten problem.

1 odpowiedź

+2 głosów
odpowiedź 19 grudnia 2017 przez Schizohatter Nałogowiec (39,600 p.)

Hasło kluczowe: margin collapsing

Podobne pytania

0 głosów
1 odpowiedź 212 wizyt
pytanie zadane 2 sierpnia 2017 w HTML i CSS przez adriana Nowicjusz (120 p.)
0 głosów
1 odpowiedź 823 wizyt
pytanie zadane 13 lipca 2017 w HTML i CSS przez Nickname16 Nowicjusz (180 p.)
0 głosów
2 odpowiedzi 356 wizyt
pytanie zadane 8 sierpnia 2015 w HTML i CSS przez DL TD Nałogowiec (36,710 p.)

92,834 zapytań

141,778 odpowiedzi

320,827 komentarzy

62,164 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...