<p> 的 padding-top 和 height 在上面的两个兄弟姐妹下面消失了

Question

我正在使用 WordPress 和 Susy 网格开发博客网站。在页面顶部 (link) 附近有一个带有 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 并且发生了同样的问题。谁能解释出什么问题了？我的风格并不太复杂，我不认为，所以我不确定会发生什么冲突。非常感谢任何帮助。

谢谢，
戴夫

Answer 1

尝试：

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

Answer 2

在main.css:457,458中：

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

header上有一个float: left;。这有效地使其脱离了正常的内容流。要么停止浮动那个 header 元素，要么在它之后做一个 clear。

<p> 的 padding-top 和 height 在上面的两个兄弟姐妹下面消失了

Padding-top and height of <p> disappear under two siblings above

html

css

wordpress

susy