Dlaczego obramowanie 1px likwiduje margines o wartości 100 pikseli i zabija pasek przewijania?

Question

To jeszcze nie ma dla mnie sensu. czego mi brakuje?

Kod jest poniżej i on Codepen.

* { 
 
    box-sizing: border-box; 
 
    margin: 0; padding: 0; 
 
} 
 

 
body { 
 
    height: 100vh; 
 
    background: pink; 
 
} 
 

 
.middle { 
 
    position: relative; 
 
    top: 200px; 
 
    /* uncomment the border to kill the scrollbar! */ 
 
/* border: 1px solid green; */ 
 
} 
 

 
.middle div { 
 
    margin-top: 100px; 
 
    border: 1px dashed yellow; 
 
}

<div class="middle"> 
 
    <div>Text</div> 
 
</div>

box-sizing: border-box; nie robi żadnej różnicy. Dodanie border powoduje, że vertical margins to not collapse, ale co dokładnie się dzieje?

• z obramowaniem: brak przewijania
• bez obramowania, załamanie dwa najlepsze marże, więc nie powinno być wymagane mniej pionowa przestrzeń, ale otrzymujemy pionowy pasek przewijania o pełnej wysokości body.

Answer 1

Wynika to z marginesu zapadania:

Jeśli nie ma granic, wyściółka, zawartość inline lub klirens oddzielić margin-top bloku z margin-top swojego pierwszego dziecka blokowanie, brak obramowania, wypełnienie, zawartość w linii, wysokość, min-wysokość lub maksymalna wysokość, aby oddzielić margines-dół bloku od marginesu-końca ostatniego elementu potomnego, a następnie te marginesy zwijają się. Zawalony margines kończy się poza rodzicem.

(https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing)

Gdy .middle nie posiada bordermargin stosowane do .middle div kończy się poza nim co skutecznie body mają height: 100vh; i margin-top: 100px;. To właśnie powoduje pasek przewijania.

Z border na .middlemargin jest zawarty w .middle tak body prostu musi height: 100vh; i bez przewijania.

Potwierdzeniem tego jest stwierdzenie, że uzyskano taki sam wynik, jeśli zamiast tego dodano border do body.

* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    height: 100vh; 
 
    background: pink; 
 
    border: 1px solid red; 
 
} 
 
.middle { 
 
    position: relative; 
 
    top: 200px; 
 
    /* uncomment the border to kill the scrollbar! */ 
 
    /* border: 1px solid green; */ 
 
} 
 
.middle div { 
 
    margin-top: 100px; 
 
    border: 1px dashed yellow; 
 
}

<div class="middle"> 
 
    <div><a href="https://iDoRecall.com">Text</a> 
 
    </div> 
 
</div>