Q&A
現象が起きている環境（OS及びブラウザとそのバージョン）
スクリーンショット
の提示があると、良い回答が得られるかと思いますよ。
webページ作成時に、一点解決することができなかった疑問がございますので、
ご質問させていただきます。
以下のように、簡単な画像を出力しただけのwebページを作りました。
HTML
1<head><link rel="stylesheet" type="text/css" href="page_styles.css"></head> 2<p class="resizeimage"> 3<img src="星空.jpg"> 4</p>
CSS
1p.resizeimage img{ 2width:100%; 3}
実行してみると、表示された画像の上下左右に、ある一定の幅の白い余白ができてしまうという問題が生じてしまいました。
・画像自体に余白があるのではと思い、他の画像でも試しましたが、同じように余白ができ、
・CSSでmarginを0にしてみたらどうかと思い、試みましたが、これも同じ結果でした。
・webで調べてみても、下のみに余白ができてしまった場合の対処法しか載っておらず、だめもとで試してみましたが、この方法も、画像に何の変化も与えてくれませんでした。
おそらく基本的なご質問であると思いますが、
可能でございましたら、余白を消す方法と余白ができてしまう理由をご教授いただければ幸いでございます。
タイトルは適切に設定してください。「表示された画像の上下左右に、ある一定の幅の白い余白ができてしまう」など、具体的にお書きください。
回答4件
0
具体的な回答に関しては他のみなさん既にされているので補足として・・・
ブラウザには何もcssの指定をしてなくても適用されるcssがあり「ブラウザ デフォルトcss」等で検索すると出てきます。
お使いのブラウザが不明なため具体的な数値はわかりませんが今回の場合だとbodyにmargin:8px;といったブラウザのデフォルトのcssが空白の原因となっています。
またブラウザごとのデフォルトcssの差異を解消するために「リセットcss」というものがよく使われていますので、こちらも検索してみることをおすすめします。
投稿2016/05/16 08:11
退会済みユーザー
総合スコア0
0
pタグ内に画像を入れてるのが悪いのでは？
HTML
1<body> 2<img class="resizeimage" src="星空.jpg"> 3</body>
その他、他の回答者さんの回答を参照。
投稿2016/05/16 07:48
編集2016/05/16 07:49
総合スコア16998
0
ベストアンサー
css
1*{ 2 margin: 0; 3 padding: 0; 4}
bodyにmarginがかかってると思います。
入れてみてください。
どんなサイトでも、最初にreset.cssを入れるといいですよ
投稿2016/05/16 07:45
編集2016/05/16 07:48
総合スコア118
ありがとうございます。
ご回答どおりに試してみたら、成功いたしました。
大変恐縮ではございますが、付随して一点ご質問よろしいでしょうか。
よろしければ、ご回答いただければ幸いでございます。
【CSS】
p.resizeimage img{
margin: 0;
padding: 0;
}
【/CSS】
上記コードでできないなと思い、悩んでいたのですが、
上記コードで余白が消えない理由をお教えいただけますでしょうか。
ブラウザには独自解釈とゆうものがあります
http://web8bungi.sakura.ne.jp/first/css/reset-css1.html
例えば<h1>だから大きく表示する等、ブラウザによって異なったcssが最初に設定されています。
その為、最初のコードですとbody（親要素）にmarginがかかっている状態でした。
なので *（アスタリスク）で要素全てのmargin,paddingを0と指定して上げる事で
余計な余白が消えます。
先程も述べたように、最初にreset.cssを設定しておくと
こういった不具合は無くなり、ブラウザによってcssの指定が異なる事もなくなります
何度もご質問してしまい、誠に申し訳ございませんでした。
また、ご回答いただき、ありがとうございました。
非常に参考になりました。
あなたの回答
tips
プレビュー
