widthを指定した場合としなかった場合でpaddingの挙動が変わる理由について

Question

ご回答者様

いつもお世話になっております。

「widthを指定した場合としなかった場合でpaddingの挙動が変わる理由」について、以下のコードを例に教えていただけますと幸いです。

【コード例】

<div class="wrapper">
　<div class="container">
    abc
　</div>
</div>

【CSS１(.containerにwidthを指定した場合)】

.wrapper{
	width:500px;
	background-color: aqua;
}
.container{
    width:500px;
	background-color: #f88;
	padding-left: 50px;
}

.containerにwidthを指定した場合、ブラウザ（Chrome）では次のようになりました。
＜ブラウザ（Chrome）＞


この場合、.containerのwidthとpaddingの合計は「width+padding-left=500px+50px=550px」となっております。

次に、.containerにwidthを指定しなかった場合を考えてみました。
HTMLコードは同じです。

【コード例】

<div class="wrapper">
　<div class="container">abc
　</div>
</div>

【CSS１(.containerにwidthを指定しなかった場合)】

.wrapper{
	width:500px;
	background-color: aqua;
}
.container{
	background-color: #f88;
	padding-left: 50px;
}

＜ブラウザ（Chrome）＞


この場合、.containerのwidthとpaddingの合計は「width+padding-left=450px+50px=500px」となっております。

なぜ、paddingを適用させる要素（今回だと<div class="container"）にwidthを指定するかどうかでwidthとpaddingの合計値が変わるのでしょうか？
（widthは子要素に継承しないというルールは関係あるのでしょうか？）
また、なぜ.containerにwidthを指定しなかった場合にwidth:450pxとなるのでしょうか？

理屈から理解できればと思います。

以上、お手数ではございますが、ご教授の程何卒よろしくお願いします。

Answer 1

widthは初期値autoなので、何も指定しないときはauto値を持っているということになります。
https://developer.mozilla.org/ja/docs/Web/CSS/width

このときの値は、仕様により以下のように決められています。

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 包含ブロックの幅

https://www.w3.org/TR/CSS2/visudet.html#the-width-property
和訳：http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visudet.html#the-width-property

padding-leftのみ指定しているので、

50 + width = 500

となり、auto時の幅は450pxに決まります。

Comments

[bah91929]

ご回答ありがとうございます！
つまり、子要素にwidthを指定しない場合はwidth:auto;となり、その状態でpaddingなどを設定しても、親要素で指定したwidthを超える幅にはならないという認識でよろしいでしょうか？

[x_x]

基本的には上記等式が成り立ちますが、極端なことを言えばpadding-left: 600px;などとなればwidthが負の値にはならないので親からはみ出るでしょう。
また、min-widthの影響も受けます。

[bah91929]

早速のご回答ありがとうございます。
padding-left:の例でいうと、親要素のwidth（今回は500px）を超える数値指定をしてしまうと、親要素の大きさはそのままで子要素がはみ出てしまうという事でよろしいでしょうか？
また、min-widthの影響も受けるとはどういう意味でございますでしょうか？
もし可能でしたらご教授くださいますと幸いです。

[x_x]

仕様へのリンクも張ったので、参考にしてください

Answer 2

widthの指定が無い場合は「width:auto;を指定」と見なされるからです。

Comments

[bah91929]

ご回答ありがとうございます。
width:auto;は親要素の幅に合わせる（超えることはない）という認識でよろしいでしょうか？
（box-sizingプロパティなどを使わない通常の場合）

[yoshinavi]

そうですね。autoは最大値を取りますので、100%と勘違いされる部分があります。

しかし、「100%」を指定するとpaddingやborder分が超えることになります。

[bah91929]

ご回答ありがとうございます。
またこんがらがってきて恐縮ですが、autoと100％の違いは何でしょうか？
どちらも最大値を取るのではないという事ですか？

[yoshinavi]

回答の仕方が悪く、余計に混乱させてしまいスミマセン。

過去質問ですが、私も回答していますが、他の回答も詳細であったり、違いを無くすbox-sizingの説明があったりしますので、よろしければ参考にしてみてください。

https://teratail.com/questions/158834

[bah91929]

ありがとうございます！
拝見いたしました。
100％とautoの違いが理解できました(^^)

Answer 3

https://saruwakakun.com/html-css/basic/margin-padding

widthは実要素の幅を指定するので、marginやpaddingはその外側に出てくるため、がご質問の答えです。

https://hajipion.com/652.html
CSS3のbox-sizingプロパティを使えばすべて内包することができます。