パーセントとマージン、パディング、またはボーダーを使用しているCSS

私にはわからない問題があります。パーセンテージでパーセンテージを使用すると、その要素がボーダー、マージン、またはパディングのサイズ（パーセンテージ）を計算することが期待されます。しかし、実際にはそれらの値は私が間違っている自分のサイズに追加されます。私の期待は間違っていますか？次の例は、この問題を示しています。両方の "divs" "left"と "right"は1行になると予想しています。私は "境界"を削除する場合、それは期待どおりに動作します。パーセントとマージン、パディング、またはボーダーを使用しているCSS

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.center { 
    border: 1px solid black; 
    width: 100%; 
    overflow: auto; 
} 

.left { 
    border: 1px solid black; 
    width: 20%; 
    float: left; 
} 

.right { 
    border: 1px solid black; 
    width: 80%; 
    float: left; 
} 
</style> 
</head> 
<body> 
<div class="center"> 
    <div class="left">left</div> 
    <div class="right">right</div> 
</div> 
</body> 
</html>

出典

2011-12-25 Alex004

これはまったく正常です。あなたが最初に期待するものではありませんが、CSSはそのように機能します。

さえなしの割合は：

#width { 
    width: 100px; 
    padding: 0 20px; 
}

この#widthのdivが140pxを占有します。パーセンテージについても同じように動作します。

あなたが望むものを達成するには、内側のdivが必要な場合があります。（ブロックを含む）、親ブロック要素のあなたは、幅（または高さ）の値としてパーセンテージを使用する場合、これらは、幅（または高さ）の割合です

<div class="left"> 
    <div class="inner"> 

    </div> 
</div> 
<div class="right"> 
    <div class="inner"> 
    </div> 
</div> 


.inner { padding: 10px; } 
.right .inner { border-left: 1px solid #ccc; }

出典

2011-12-25 12:29:03 Robin

。

出典

2011-12-25 12:29:35

パディングまたはボーダーは、常にエレメントサイズに追加されます。

マージンはサイズに決して追加されませんが、要素の外側にスペースを追加します。

パーセントまたは設定値は関係ありません。上記は常に真です。ボックスモデルは、あなたがこの問題を修正するために何ができるか--->HERE

出典

2011-12-25 12:29:55 Scott

を助けることが確認

はbox-sizingを使用することです。 CALC（ - 2ピクセル80％）：あなたはこの問題を解決するために）（計算値を使用することができ、超近代的なブラウザでhttp://jsfiddle.net/Marwelln/YYkxK/

box-sizing:border-box

出典

2011-12-25 12:34:04 Marwelln

はIE8 + – frnhr

で動作します。Firefox 27（2014年3月現在の現在のバージョン）では動作しません。列は2行になります。 – Loren

参照してください。そしてはい、それは正常です。幅を100pxに設定して境界を150pxに設定した場合、境界線はが追加された場合どうなりますか？

出典

2011-12-25 14:16:14 powerbuoy

パーセントとマージン、パディング、またはボーダーを使用しているCSS

答えて

関連する問題