上面<p>两个兄弟姐妹下方的填充顶部和消失的高度

Question

我正在一个使用WordPress和Susy网格的博客网站上工作。在带有padding-top: 4em的页面（链接）顶部附近有一个<p>标签（带有轻微的脏话）。不知怎的，这个填充在前两个兄弟<h1>和<div>下面出现了。html如下：

<h1 class="entry-title">A Manifesto, of Sorts</h1>
    <div class="entry-meta">
        <span class="posted-on"><a href="http://howtolearnalanguagelikeaboss.com/?p=6" rel="bookmark"><time class="entry-date published updated" datetime="2015-11-22T02:07:31+00:00">November 22, 2015</time></a></span>       </div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
    <p id="manifesto">F--- Berlitz. F--- Rosetta. Do it yourself and do it in style.</p>

这个元素的样式如下：

#manifesto {
  text-align: center;
  font-style: italic;
  font-weight: 300;
  padding: 2em 0 1em 0;
}

使用Chrome检查器，我可以判断出<p>确实很高，并且padding-top（检查器中的绿色突出显示区域）远高于<h1>同级。我被难住了。。。我尝试了margin-top，但出现了同样的问题。有人能解释出了什么问题吗？我不认为我的风格太复杂，所以我不确定什么会有冲突。如有任何帮助，我们将不胜感激。

谢谢，
Dave

Answer 1

In main.css:47458:

header {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
}

标头上有一个float: left;。这有效地使它脱离了正常的内容流。停止浮动该标头元素，或者在它之后执行clear。

Answer 2

尝试：

.entry-content {
    display: inline-block;
}