web-dev-qa-db-ja.com

CSSでパディングプロパティが幅または高さを変更しないようにするにはどうすればよいですか？

DIVsでサイトを作成しています。 DIVを作成するときを除いて、すべてがうまくいきます。このように作成します（例）：

newdiv {
    width: 200px;
    height: 60px;
    padding-left: 20px;
    text-align: left;
}

padding-leftプロパティを追加すると、DIVの幅が220pxに変わり、200pxのままにしておきます。

DIVとまったく同じanotherdivという名前の別のnewdivを作成し、newdivの内部に配置しますが、newdivにはパディングがなく、anotherdivにはpadding-left: 20pxがあります。私は同じことを得ます、newdivの幅は220pxになります。

この問題を修正するにはどうすればよいですか？

htmlcsscss3padding
207
Sam

プロパティを追加：

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

注：これ動作しません Internet Explorerバージョン8以下。

361
Pramod

width: autoとmargin-left: 20pxを使用して、newdivにdivを配置します

Newdivからパディングを削除します。

W3 Boxモデルページには良い情報があります。

39
rvarcher

これを試して

box-sizing: border-box;
23
Ajay Gupta

Divのサイズを変更せずにdiv内のテキストをインデントする場合は、text-indentではなくCSSのpadding-leftを使用します。

.indent {
  text-indent: 1em;
}
.border {
  border-style: solid;
}
<div class="border">
  Non indented
</div>

<br>

<div class="border indent">
  Indented
</div>
8
mvndaai

box-sizing: border-box;を追加するだけです

8
Felix Wong

padding-leftプロパティを追加すると、DIVの幅が220pxに変わります

はい、それはまさに標準に準拠しています。それが動作するはずです。

Newdivとまったく同じanotherdivという名前の別のDIVを作成し、newdiv内に配置しますが、newdivにはパディングがなく、anotherdivにはpadding-left：20pxがあるとします。私は同じことを得ます、newdivの幅は220pxになります。

いいえ、newdivの幅は200ピクセルのままです。

1
Guffa