为什么这个HTML div在下面有额外的空间但不在

我无法弄清楚这个空间来自哪里。从这个小提琴中可以看到，<header>和<main>部分之间有一些空白区域。它也似乎是在底部的主要部分添加空间，但不在任何一个的顶部。为什么这个HTML div在下面有额外的空间但不在

HTML：

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

来源

2015-02-07 Chipe

这是因为的img标签是内嵌在默认情况下和空间的下行字母（以字符 'P' 基线， 'Q' 等下面的部分）。

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

来源

2015-02-07 05:18:18 Richard

为了进一步说明这一点，如果您将'line-height：0;'设置为标题，您将看到相同的效果。 – Robert 2015-02-07 05:22:19

感谢您的解释！我没有意识到这是默认的内联。这将解释它！谢谢您的帮助！ – Chipe 2015-02-07 05:24:27

从图像的下方的空间，避免这个空间，你需要在header img或添加display:block或float:left设置的height：

您可以通过改变IMG的块解决这个问题既<header>和<img>。，

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*/ 
}

jsfiddle

来源

2015-02-07 05:18:45 Sathish

-1

您可以指定一个负值，填充，底部来处理..

来源

2015-02-07 05:20:02

我不明白投票的原因..这工程..其他的解决方案可以更好，但为什么投票的东西其他工作太.. ..？ – 2015-02-07 05:33:27

请提供一个jsfiddle或类似的证明它的工作原理。 – Alohci 2015-02-07 09:48:34

看到Demo

可以设置高度标头的等于高度IMG的 ..

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

来源

2015-02-07 05:22:02 mehdi

只需更改标题

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

enter image description here

的CSS，你可以看到

来源

2015-02-07 05:23:56 Kashyap

简单.... 只是用display:block;图像

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

来源

2015-02-07 06:12:34

为什么这个HTML div在下面有额外的空间但不在

回答

相关问题