为什么这个HTML div有额外的空间，但不高于

Question

我无法弄清楚这个空间的来源。从这个小提琴可以看出，<header>和<main>部分之间有一些空白区域。它似乎也在底部的主要部分上添加了空间，但没有添加到任何一个的顶部。

http://jsfiddle.net/bbor6s3j/

HTML：

<header>
    <img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Campania_banner_View_from_Capri.jpg">
</header>
<main>
   Main Section
</main>

Answer 1

这是因为默认情况下img标签是内联的，并且该空间用于下行（基线下面的部分是字符＆＃39; p＆＃39;，＆＃39; q＆＃39;等等）。

您可以通过将img更改为块来解决此问题：

header img {
    width: 100%;
    display: block;
}

Answer 2

只需更改CSS OF标题

即可

header
{
  width: 100%;
  float: left;
}

你可以看到

Answer 3

图像下方的空间， 要避免此空间，您需要在display:block或float:left中添加header img或height 设置<header>和<img>。{/ p>的header{ width:100%; height:100px; } header img{ width:100%; height:100%; }

header img{
    width:100%;
    display:block;/*added*/
}

或

header img{
    width:100%;
    float:left;/*added*/
}

或

{{1}}

jsfiddle

Answer 4

请参阅Demo

你可以设置标题的高度等于img的 height ..

header{
   width:100%;
   height: 112px;
}

Answer 5

简单.... 只需使用display:block;即可映像

http://jsfiddle.net/sarowerj/drmsLp17/

Answer 6

您可以为padding-bottom指定负值以处理..