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

Question

<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?

Comments

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;}

 

---

Zamiast przesuwac section to przesuwa caly article

Teraz czytam o collapsingu

---

No właśnie ja tego nie widzę. <section> dostaje margin: 50px auto; względem <article> tak jak ostylowałeś.

---

No tak powinno być, tylko że article dostaje tego marginesa a nie section

---

kliknij ikonkę codepen nad moim kodem. Niebieskie obramowanie to section. I co widać?

---

Dobra, po dodaniu bordera margin zaczął działać. To jest rozwiązanie? Czy po prostu dodałeś nieświadomie?

---

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

style dla tych elementów.

---

Spk, dzięki

---

Ale Schizohatter miał rację. Jak zresetujesz style a potem będziesz ustawiał style dla h1 i p to znowu napotkasz ten problem.

Answer 1

Hasło kluczowe: margin collapsing