Perché un bordo 1px cancella un margine superiore di 100 px e uccide una barra di scorrimento?

Question

Questo non ha ancora senso per me. Cosa mi manca?

Il codice è qui sotto e 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; non fa alcuna differenza. L'aggiunta di border causa lo vertical margins to not collapse, ma cosa sta succedendo esattamente?

• con bordo: nessuna barra di scorrimento
• senza bordo, il crollo di due top dei margini, quindi non ci dovrebbero essere meno spazio verticale necessario, ma si ottiene una barra di scorrimento verticale sul tutta altezza body.

Answer 1

Ciò è dovuto al collasso margine:

Se non c'è alcun bordo, padding, contenuto in linea, o passaggio per separare il margine-superiore di un blocco con il margine-top del suo primo figlio blocco, o nessun bordo, riempimento, contenuto in linea, altezza, altezza minima o altezza massima per separare il margine inferiore di un blocco con il margine inferiore del suo ultimo figlio, quindi i margini si comprimono. Il margine collassato finisce fuori dal genitore.

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

Quando .middle non ha una border il margin applicato al .middle div finisce fuori di essa fatto rendendo body avere height: 100vh; e margin-top: 100px;. Questo è ciò che causa la barra di scorrimento.

Con il border sul .middle il margin è contenuto all'interno di .middle così body deve solo height: 100vh; e nessuna barra di scorrimento.

Come conferma di questo, si otterrà lo stesso risultato se si dovesse aggiungere uno border a body invece.

* { 
 
    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>