画像の上下に空欄出てしまいます。それを消したいです

ウェブページでどうしても空白ができてしまい困っています。
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;
}