为什么div底部有更多空间？

Question

我的header内有div，由于某种原因，div下方有更多空间。我尝试将所有padding设置为0，希望看到哪一个导致它，但它似乎根本不是padding。

HTML

<header>
    <div class="logo">
        <div class="centrDivInDiv">
            <h1>Welcome to Planet Earth</h1>
            <p>The best planet after Pluto.</p>
        </div>
    </div>
</header>

CSS

body {
    margin: 0px;
}

h1 {
    margin-bottom: 0px;
}

header {
    background-color: #E74C3C;
    padding: 10px;
}

header p {
    line-height: 0%;
}

.logo {
    line-height: 80%;
    padding: 10px 20px 10px 20px;
    margin: 0px;
    background-color: #2C3E50;
    display: inline-block;
}

.logo p {
    margin-top: 24px;
}

.centrDivInDiv {
    display: table-cell;
    vertical-align: middle;
    margin: 0;
}

JsFiddle

Answer 1

将vertical-align:middle添加到您的.logo div（您可以将其从.centrDivInDiv中删除）：

.logo {
    line-height: 80%;
    padding: 10px 20px 10px 20px;
    margin: 0px;
    background-color: #2C3E50;
    display: inline-block;
    vertical-align: middle;
}

jsFiddle example

Answer 2

jsFiddle

问题的存在是因为您在display: inline-block;

中使用.logo

解决此问题的最佳方法是在标题中将 font-size 设置为 0 ，这样就可以了：

header {
    background-color: #E74C3C;
    padding: 10px;
    font-size: 0;
}

此外，您应该在 .logo 中设置 font-size ，这样就可以这样了

.logo {
    line-height: 80%;
    padding: 10px 20px 10px 20px;
    margin: 0px;
    background-color: #2C3E50;
    display: inline-block;
    font-size: 16px;
}

也许此链接会对您有所帮助，它有更多详情

Fighting the Space Between Inline Block Elements | CSS-Tricks

Answer 3

您的问题是由CSS的display: inline-block引起的。如果您将其删除或更改为display: block，则可以。您还应该设置width: 50%

.logo

中的所有内容

检查fiddle