質問: webページ作成時に、一点解決することができなかった疑問がございますので、 ご質問させていただきます。 以下のように、簡単な画像を出力しただけのwebページを作りました。 ``` ``` ``` p.resizeimage img{ width:100%; } ``` 実行してみると、表示された画像の上下左右に、ある一定の幅の白い余白ができてしまうという問題が生じてしまいました。 ・画像自体に余白があるのではと思い、他の画像でも試しましたが、同じように余白ができ、 ・CSSでmarginを0にしてみたらどうかと思い、試みましたが、これも同じ結果でした。 ・webで調べてみても、下のみに余白ができてしまった場合の対処法しか載っておらず、だめもとで試してみましたが、この方法も、画像に何の変化も与えてくれませんでした。 おそらく基本的なご質問であると思いますが、 可能でございましたら、余白を消す方法と余白ができてしまう理由をご教授いただければ幸いでございます。
回答: 具体的な回答に関しては他のみなさん既にされているので補足として・・・ ブラウザには何もcssの指定をしてなくても適用されるcssがあり「ブラウザ デフォルトcss」等で検索すると出てきます。 お使いのブラウザが不明なため具体的な数値はわかりませんが今回の場合だと`body`に`margin:8px;`といったブラウザのデフォルトのcssが空白の原因となっています。 またブラウザごとのデフォルトcssの差異を解消するために「リセットcss」というものがよく使われていますので、こちらも検索してみることをおすすめします。