padding-top erstreckt div in Chrom

Question

Ich habe Code wie folgt aus:

https://jsfiddle.net/y09dngnj/1/

<div style="border: 1px solid green"> 
    <div class="biddingStat" id="biddingStat0" 
     style="background-color: #DC0707;opacity: 1; 
     text-align: center; ">10000 
    </div> 
</div> 

.biddingStat { 
    width: 80px; 
    position: relative; 
    bottom: 0px; 
    background-color: #eeee22; 
    padding-top: 20px; 
    /*left: 40px;*/ 
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px; 
    min-height: 30px; 
    height: 100px; 
} 

Wenn Sie CSS von padding-top: 20px zu padding-top: 5px und Rerun Geige zu ändern, obwohl es Höhe 100px von roten div ist, die Höhenänderungen. Ich würde erwarten, dass der Text seine Position ändern würde, um weiter vom oberen Rand entfernt zu sein, aber die Höhe von div würde 100px bleiben, egal was passiert. Wie 100px Höhe von div behalten und Text von oben gepolstert haben?

Answer 1

Ändern Sie padding-top zu margin-top in der CSS-Datei.

See: CSS Box Model

<div style="border: 1px solid green"><div class="biddingStat" id="biddingStat0" style="background-color: #DC0707;opacity: 1;text-align: center; ">10000</div></div> 
 

 
<style> 
 
    .biddingStat 
 
    { 
 
\t width: 80px; 
 
\t position: relative; 
 
\t bottom: 0px; 
 
\t background-color: #eeee22; 
 
    margin-top: 150px; 
 
    padding-top: 20px; 
 
\t /*left: 40px;*/ 
 
\t border-top-left-radius: 10px; 
 
\t border-top-right-radius: 10px; 
 
\t min-height: 30px; 
 
\t height: 100px; 
 
    } 
 
</style>

Answer 2

Wenn Sie Polsterung, die Abmessungen eines Elements beeinflussen wollen Sie nicht verwenden können box-sizing: border-box; die die div erlauben nicht von einer Polsterung betroffen sein oder Grenzen hinzugefügt.