[解決済み] 幅自動と幅100パーセントの違い

質問

以前、私が想定していた width: auto は、幅はコンテンツの幅に設定されると考えていました。今は、親の幅をフルに使っていることがわかります。

どなたか、これらの違いを説明していただけませんか？

どのように解決するのですか？

幅の自動調整

divやpのようなブロックレベル要素の初期幅はautoです。これは、そのブロック内で利用可能なすべての水平スペースを占有するように拡張します。水平方向のパディングやボーダーがある場合、それらの幅は要素の合計幅に加算されません。

幅 100

一方、width:100を指定すると、要素の全幅は、そのブロックの100%に水平方向のマージン、パディング、ボーダーを加えたものになります（box-sizing:border-boxを使用していない場合は、全幅の計算方法を変更するために100%にマージンだけが追加されます）。これは、あなたが望むことかもしれませんが、ほとんどの場合、そうではありません。

この違いを視覚化するために、次の図をご覧ください。

ソース