【CSS】width: 100%とwidth:auto の違いって一体なんだ??

疑問に思ったことがある。

「width: autoとwidth:100%の違いは何なの??」

ということだ。

スポンサーリンク

width:autoとwidth:100%の違いとは?

pタグ(段落タグ)やdivタグ、見出しタグなどのdisplay: blockの要素の場合は、widthの値をとくに指定しなければ、width:autoということになる。

つまり、要素の幅は基本的に横いっぱいに広がる。

一方で、width:100%も指定した要素が画面横いっぱいに広がる。

「じゃどっちも同じじゃん!」

と思った私は甘かった。

違いを生み出していたのは、幅を指定する要素ではなく、paddingやborderだった!

widthの説明

上図のようにwidth:autoの場合、widthの中にpadding(内側の余白)とborder(罫線)が含まれる。

しかし、width:100%には、paddingとborderが含まれないのである!

「どういうこと??」と思ったあなたは私と同じ理解度かもしれない。

つまり、width:autoで指定した場合は、borderやpaddingも含めて、横幅いっぱいに広がる。

画面からborderだけ見切れてしまうということがない。

しかし、width:100%はその指定した要素を画面いっぱいに広げちゃうから、borderとかpaddingが指定されていると

「あれ?こんなはずじゃないのに、、、」

と感じで画面からはみ出てしまうことが起こりえるのだ。

おすすめの記事