1

ウェブページでどうしても空白ができてしまい困っています。
pタグで囲みたいのですが、pタグを使うとどうしても上下に空白ができてしまいます。
この空白を消したいです。
どうしたらよいのでしょうか?

header-boxの画像です
青い海の画像と下の同じく海の画像との間に空白ができてしまいます。

<body>
   <div id="pc-wrapper">
      <div id="pc-header-box">
         <p><img src="aaa"></p>
      </div>
      <div id="pc-logo-box">
         <img src="logo">
      </div>
      <div id="pc-page-box1">
         <p><img src="bbb"></p>
      </div>
      <div id="pc-page-box2">
         <p><img src="bbb"></p>
      </div>
      <div id="pc-page-box3">
         <p><img src="ccc"></p>
      </div>
      <div id="pc-page-box4">
         <p><img src="ddd"></p>
      </div>
      <div id="pc-page-box5">
         <p><img src="eee"></p>
      </div>
      <div id="pc-page-box6">
         <p><img src="fff"></p>
      </div>
   </div>
<body>

css

#pc-wrapper
{
  display:block;
  width:1300px;
  height:1800px;
  margin:0 auto;
}

#pc-header-box
{
  display:block;
  position:relative;
  width:1300px;
  height:800px;
  vertical-align:bottom;
  margin:0 auto;
}

#pc-logo-box
{
  display:block;
  position:relative;
  width:1300px;
  height:200px;
  background-color:#30F;
  margin:0 auto;
}

#pc-logo-box img
{
  display:block;
  position:relative;
  top:50px;
  margin:0 auto;
}

#pc-page-box1
{
  display:block;
  position:relative;
  background-color:#69C;
  width:650px;
  height:430px;
}

#pc-page-box1 p
{
  display:block;
  background-color:#F99;
}
1

1 件の回答 1

3

<p> タグには多くのブラウザで上下マージンが設定されていますから、それを上書きすればいいと思います。

(追記)インライン要素である <img> はデフォルトで vertical-align: baseline になっているため、それでも若干の隙間が空くようでした。これを避けるには vertical-align: bottom で上書きするか、 display: block とするのがよいでしょう。

参考 (アクセシビリティも考えて)画像の下にできる余白をなくす | 誠

上記2点を合わせて、こんな感じでいがかでしょうか。

#pc-wrapper p
{
  margin: 0;
}
#pc-wrapper img
{
  display: block;
  /* imgを横にも並べたい時など、 vertical-align: bottom でもOK */
}

サンプル

p {
  margin: 0;
}

img {
  /* display: block; */
  vertical-align: bottom;
}
<p><img src="http://dummyimage.com/100x100/000/fff" /><img src="http://dummyimage.com/100x100/000/fff" /></p>
<p><img src="http://dummyimage.com/100x100/000/fff" /></p>

余談ですが、 <div><p> は元々ブロック要素ですから、どこかで上書きされていない限り display: block は不要ではないでしょうか。

5
  • 私もこれでいいと思い、試したのですが、Google Chrome 40.0.2214.115 m (Windows)では、どうにも<p>のcomputed styleでheightに画像の縦幅+4pxが設定されて余白が見えてしまいます。それぞれの<p>に画像の縦幅と同じheightを指定すると余白がなくなるので、そうしなければならないのかな…と調べているところであります。
    – えうう
    2015年2月27日 8:33
  • @KIDtheEuforia ご指摘ありがとうございます、インライン要素であることを忘れていました。回答を修正したのでよろしければご確認くださいませ。
    – unarist
    2015年2月27日 8:57
  • 確認いたしました。先ほどと同環境で確認し、まったく余白がなくなっておりました!修正ありがとうございます。そして、勉強になりました!ありがとうございます!
    – えうう
    2015年2月27日 9:03
  • すばらしい!!一発回答です。まったく問題なく動きました!
    – webman
    2015年2月27日 11:12
  • @webman さん。 解決したようですので、この解答にチェックを付けていただけると回答された方の励みにもなりますし、質問者にも評価点がつきます。ぜひよろしくお願いします。
    – 3100
    2015年3月1日 2:07

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。