パディングトップは、私は、このようなコードを持っているクロム

Question

にDIVを伸ばし：

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

赤のdivの高さ100pxにありますが、あなたは、padding-top: 20pxからpadding-top: 5pxと再実行フィドルにCSSを変更した場合は、高さの変化。私はテキストが上端からより遠くなるようにその位置を変えることを期待するだろうが、divの高さは何となく100pxのままになるだろう。 divの100ピクセルの高さを維持し、テキストを上から埋めた状態にするにはどうすればよいですか？

Answer 1

CSSファイルのpadding-top〜margin-topに変更してください。

参照：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

あなたはパディングがdiv要素は、任意のパディングによって影響されないようになりますあなたが使用できる要素の寸法box-sizing: border-box;に影響を与えたくない場合はまたはボーダーが追加されました。