Q&A
どこでですか？出展もとがあれば明記してください >と聞いた
題の通りです。
CSSにおいて、width: 100% と、 width: auto の違いは、親要素のpadding/borderを含むかどうかと聞いた(参考)ので、早速試してみたのですが、どちらを指定しても、paddingを含まない最大幅になってしまいます。
html
1<div class="outer"> 2 <div class="inner1"> 3 inner1 4 </div> 5 <div class="inner2"> 6 inner2 7 </div> 8</div>
css
1div.outer { 2 background-color: gray; 3 padding: 0 10px 0 10px; 4} 5div.inner1 { 6 width: 100%; 7 background-color: green; 8} 9div.inner2 { 10 width: auto; 11 background-color: blue; 12}
私のwidthに対する理解が間違っているのでしょうか。あるいはコードの書き方やjsfiddleの問題でしょうか？
非常に初歩的な問題かと思いますが、ご回答よろしくおねがいします。
ご指摘ありがとうございます！確かに出典を併記することは必須でしたね。
本文の修正をいたしました。出典はこちらになります。 http://bashalog.c-brains.jp/15/03/11-205639.php
個人サイトは間違いが含まれる場合があるので、参考にするのは信頼性の高いサイトに限定した方が良いとおみます。初心者向けですと、MDNがお勧めです。
回答3件
0
width プロパティ
width: auto は計算方式がややこしいので一概にはいえませんが、CSS 2.2 規定では width プロパティは content-box の幅を指定します。
ただし、CSS3 で box-sizing プロパティが出来たので、width プロパティが border-box の幅指定になる場合もあります。
- CSS Intrinsic & Extrinsic Sizing Module Level 3（日本語訳）
- 3.1.1. 選好サイズプロパティ： width, height - CSS Intrinsic & Extrinsic Sizing Module Level 3（日本語訳）
CSS ボックスモデル
ボックスモデルを読めば、4種のボックスの違いが分かります。
- ボックスモデル - CSS 2.2 日本語訳
- CSS Box Model Module Level 3 （日本語訳）
- CSS 基本ボックスモデルの紹介 - CSS: カスケーディングスタイルシート | MDN
| ボックス名称 | 説明 | 補足 |
|---|---|---|
| content-box | width プロパティ、height プロパティで指定された領域を囲うボックス | box-sizing: content-box (初期値)の場合に限る |
| padding-box | padding プロパティで指定された領域を囲うボックス | |
| border-box | border プロパティで指定された領域を囲うボックス | box-sizing: border-box が指定された場合は、width プロパティ、height プロパティで指定された領域を囲うボックスとなる |
| margin-box | margin プロパティで指定された領域を囲うボックス |
width: 100%
width を%単位で指定した場合、親要素の width 値に対する割合になります。
HTML
1<style> 2div.outer { 3 border: solid 1px red; 4 padding: 1em; 5 background-color: #fee; 6} 7div.inner1 { 8 width: 100%; 9 margin: 1em; 10 padding: 1em; 11 border: solid 1px green; 12 background-color: #efe; 13} 14div.inner2 { 15 width: auto; 16 margin: 1em; 17 padding: 1em; 18 border: solid 1px blue; 19 background-color: #eef; 20} 21</style> 22</head> 23<body> 24<div class="outer"> 25 parent 26 <div class="inner1">width: 100%</div> 27 <div class="inner2">width: auto</div> 28</div>
width 値は margin, padding, border の幅を含みませんので、width: 100& 指定した要素はその分、突き抜けてしまいます。
width: auto で期待通りならそれでよし。
期待通りでなければ、border-box を使用するか、calc() で演算する必要があります。
Re: Sa2Knight さん
投稿2018/11/18 04:05
編集2018/11/18 06:50総合スコア18189
詳細なご解説いただきありがとうございます！
今まで見よう見まねでしかCSSを書いていなかったので、ボックスモデルについてしっかりと理解を深めて、このような頓珍漢な質問をなるべくしないように精進したいと思います！
0
親要素のpadding/borderを含むかどうかと聞いたので
box-sizingと混ざっていませんか？
【box-sizing - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing
【CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | phiary】
http://phiary.me/css3-box-sizing/
投稿2018/11/18 03:30
総合スコア69583
ありがとうございます！
CSS3では `box-sizing` が便利とは聞いていましたが、どんなものなのかはまだ調べていないので、引き続き調査してみたいと思います。
0
ベストアンサー
width: 100% と、 width: auto の違いは、親要素のpadding/borderを含むかどうかと聞いた
これは「前提」とテストコードが間違っていて、「親要素」ではなく、該当の「要素そのもののpadding/borderを含むかどうか」です。
※提示コードで言えば「子要素」そのものの事です。
提示のHTMLと以下のCSSで確認して下さい。
CSS
1div.outer { 2 width: 300px; 3} 4 5div.inner1 { 6 width: 100%; 7 padding: 0 10px 0 10px; 8 background-color: green; 9} 10 11div.inner2 { 12 width: auto; 13 padding: 0 10px 0 10px; 14 background-color: blue; 15}
違いが出るはずです。「参考先」も親要素のpadding/borderとは言っていないと思います。
この違いを理解した上で「box-sizing」を上手く利用してください。
投稿2018/11/18 06:08
総合スコア3523
ご丁寧なご回答ありがとうございました！
どうやら参考先の記事を見た際に誤認したことをそのまま覚えてしまっていたようです。
要素そのもののpadding/borderを考慮するかどうかですね。修正版のコードで試したところ、違いが出ることが確認できました。ありがとうございました！
参考先の記事も、パッと見では「boxA」「boxB」の図示が、親子関係に見えなくもないので、誤認も仕方が無いかも知れませんね。
「think49」さんも言われていますが、個人記事の場合「解釈間違い」で「検証」が曖昧であったり「推測」だったりで「誤り」の場合がたまにあるのは事実なので、MDN（https://developer.mozilla.org/ja/docs/Web）と他サイトでの複数確認をされると良いかと思います。
解決されて何よりです。
(^^)
あなたの回答
tips
プレビュー
