結論
・width: 100%・・・指定した要素のpadding,borderの値も含めて横幅いっぱいになる
・width: auto・・・padding,borderの値を除いて横幅いっぱいになる
いつも使ってるかんたんなもの、なのに以外に雰囲気だけ掴んでいて詳細は知らない。。。自分の身の回りにありますよねそういうもの。そんな代表格と自分で決めて付けているものの一つがwidth: 100%,width: autoではないでしょうか？
「あれ？なんかwidth: 100%指定してるのに横はみ出てるんですけど？」
解決できます。
解説
width: 100%
html
<div class="test-outer">
<div class="test">
This is div test.
</div>
</div>
css
.test-outer {
width: 50%;
height: 100px;
margin: 60px auto 0;
background-color: rgba(90, 19, 86, 0.589);
}
.test-outer .test {
width: 100%;
color: white;
background-color: #33a085;
}
上記のコードではwidth: 100%を使用していますので、親要素(test-outer)いっぱいに子要素が広がります。
ではこの子要素(class:test)に
paddingを追加してみます。.test-outer {
width: 50%;
height: 100px;
margin: 60px auto 0;
background-color: rgba(90, 19, 86, 0.589);
}
.test-outer .test {
width: 100%;
padding: 10px; /*追加*/
color: white;
background-color: #33a085;
}
横幅が親要素からはみ出ちゃってますよね。これは、指定したpaddingによって、縦には余裕がありますが、横幅が右に20pxはみでてしまっています。これを解決するにはwidth: autoに指定するか、box-sizing: border-boxを子要素に指定して上げることが考えられます。
これはborderを指定した場合でも同じ現象が発生します。
.test-outer .test {
width: 100%;
color: white;
background-color: #33a085;
border-right: 10px solid black; /* 追加 */
}
まとめ
width:100を指定する場合は、paddingやborderを意識することが、自分が意図しないデザイン崩れを防ぐ方法なのかなと思います。
また、ブロック要素では初期値でwidth: autoが適用され、横幅いっぱいになる性質がありますが、インライン要素やdisplay: inline-blockを指定した要素は、width: auto(初期値)の場合の横幅は要素内のコンテンツに依存します。
| width: 100% | width: auto(初期値) | |
|---|---|---|
| block | 横幅いっぱい | 横幅いっぱい |
| inline-block | 横幅いっぱい | コンテンツ幅 |
| inline | コンテンツ幅 | コンテンツ幅 |
（「display: inline-block」だと横幅は要素の中身に依存するので、横幅いっぱいに広げたい場合はwidth:100%を指定する必要があります。width:autoを指定しちゃうと要素の中身のサイズ担ってしまいます。←「display: inline」の性質。 つまり、inline要素に幅指定(※高さ指定も)は効かないので、幅指定したい場合は「display:inline-block」もしくは「display: block」を指定する必要があります。）
