

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

![header-boxの画像です](https://i.stack.imgur.com/l0cn3.jpg)  
![青い海の画像と下の同じく海の画像との間に空白ができてしまいます。](https://i.stack.imgur.com/hhnZa.jpg)

[code]

    <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>
    
[/code]

css

[code]

    #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;
    }
    
[/code]


CC BY-SA 3.0
2015-02-27T07:58:45.227
7209
2019-12-13T17:54:53.400
2015-02-27T08:02:51.997
3639
7647
question
css
画像の上下に空欄出てしまいます。それを消したいです


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

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

参考 [（アクセシビリティも考えて）画像の下にできる余白をなくす | 誠](http://daisukenagai.com/blog/4.html)

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

[code]

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

サンプル

[code]

    p {
      margin: 0;
    }
    
    img {
      /* display: block; */
      vertical-align: bottom;
    }
[/code]

[code]

    <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>
[/code]

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


CC BY-SA 4.0
2015-02-27T08:23:57.960
7211
2019-12-13T17:54:53.400
2019-12-13T17:54:53.400
32986
8000
7209
answer