Come è il padding-top come percentuale relativa alla larghezza del genitore?

Question

Ecco un esempio:

http://jsfiddle.net/QZAd8/1/

Notate come tutti i div rossi sono gli stessi height e hanno padding-top:100%;, eppure A & B avere dimensioni diverse imbottitura ... e sembra che la larghezza del genitore cambia questo valore (nota che C cambia il height del genitore, ma ciò non altera il padding).

Perché il padding è correlato alla larghezza in questo modo?

Edit: per ragioni storiche, e in caso jsfiddle va via, il codice che ho usato nel mio esempio è il seguente ...

.outer { 
 
    background-color: green; 
 
    height: 300px; 
 
    width: 70px; 
 
    float: left; 
 
    margin-right: 10px; 
 
} 
 

 
.middle { 
 
    background-color: red; 
 
    height: 100px; 
 
    width: 50px; 
 
    padding-top: 100%; 
 
} 
 

 
.inner { 
 
    background-color: blue; 
 
    height: 3px; 
 
    width: 100%; 
 
}

<div class='outer'> 
 
    <div class='middle'> 
 
    A 
 
    <div class='inner'> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class='outer' style='width:100px'> 
 
    <div class='middle'> 
 
    B 
 
    <div class='inner'> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class='outer' style='height:400px'> 
 
    <div class='middle'> 
 
    C 
 
    <div class='inner'> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Da CSS fluid layout: margin-top based on percentage grows when container width increases:

In CSS, tutti e quattro i margini: e padding: le percentuali sono relative alla larghezza ... anche se ciò può sembrare assurdo. Questo è solo il modo in cui sono le specifiche CSS, non c'è niente che tu possa fare al riguardo.

Straight from the horse's mouth:

'padding-top', 'padding-right', 'padding-bottom', 'padding-left' 
Value:  <padding-width> | inherit 
Initial: 0 
Applies to:  all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column 
Inherited:  no 
Percentages: refer to width of containing block 
Media:  visual 
Computed value:  the percentage as specified or the absolute length 

Percentuali: in riferimento alla larghezza del blocco contenitore

Answer 2

Solo perché è il modo in cui è supponiamo di essere :) http://www.w3.org/TR/CSS2/box.html#propdef-padding-top

Answer 3

È vero che il padding p ercentage è relativo alla larghezza, ma nello specifico, padding: 100% può anche essere letto come padding: *width-of-container*px.

Il A e C blocchi aveva una larghezza di 70px. L'applicazione di padding: 100% era la stessa di padding: 70px