疑問に思ったことがある。
「width: autoとwidth:100%の違いは何なの？？」
ってことだ。
width:autoとwidth:100%の違いとは？
pタグ（段落タグ）やdivタグ、見出しタグなどのdisplay: blockの要素の場合は、widthの値をとくに指定しなければ、width:autoということになる。
つまり、要素の幅は基本的に横いっぱいに広がる。
一方で、width:100％も指定した要素が画面横いっぱいに広がる。
「じゃどっちも同じじゃん！」
と思ったプログラミング小僧は甘かった。
違いを生み出していたのは、幅を指定する要素ではなく、paddingやborderだった！
上図のようにwidth:autoの場合、widthの中にpadding(内側の余白）とborder（罫線）が含まれる。
しかし、width:100%には、paddingとborderが含まれないのである！
「は？？」と思ったあなたはプログラミング小僧と同じ理解度かもしれない。
つまり、width:autoで指定した場合は、borderやpaddingも含めて、横幅いっぱいに広がる。
画面からborderだけちょちょ切れるってことがない。
でも、width:100％はその指定した要素を画面いっぱいに広げちゃうから、borderとかpaddingが指定されていると
「あれ？こんなはずじゃないのに、、、」
って感じで画面からはみ出てしまうことが起こりえるのだ。
widthは奥が深い！！
