填充与边距混乱对齐？

Question

我正在Ghost中设计一个主题，遇到了一个我无法找到解决方案的问题。我已经把这个问题花了几个小时，也许我没有找到合适的条款，所以任何帮助都会受到赞赏：

我有一个div包装主标签，顶部有一个导航栏，包装器div应该清除，当我使用margin-top清除导航栏时，事情似乎有效：

如您所见，主标记与包装div（.wrapper_alex）的内容部分对齐。

但是，如果我使用padding-top代替margin-top（相同值为101.235px），我会理解这一点：

您在此处看到主标记的内容和包装div的内容未对齐。引入的垂直间距用红色圈出。应该注意的是main没有任何填充，边框或边距，所以我预计它会对齐。

知道这里发生了什么吗？

非常感谢你的帮助。

编辑1：

两种情况下main的CSS属性：

编辑2：

  <div role='banner' class="header_alex">


  <h5 class="blogtitle_alex">
    <a title="Portfolio" href='http://localhost:2368'>
      Portfolio
    </a>
  <!-- Funky formatting below is for getting rid of space between inline-block elements introduced by whitespace/newlines i.e h5 is purposefully not closed off and only closed off in navigation-->
  </h5
      ><a title="Projects" href='/projects/' class="header_tab_alex">
      Projects
    </a
    ><a title="Travels" href='/travels/' class="header_tab_alex">
      Travels
    </a
    ><a title="About" href='/about/' class="header_tab_alex">
      About
    </a
>

</div>
  <div class="wrapper_alex">

<main class="main_alex" role="main">
    <article class="article_alex" role="article" itemscope itemtype="http://schema.org/Article">
    <header class="postheader_alex">
    <h1 class="posttitle_alex" itemprop="headline"><a href="/building-my-portfolio/" rel="bookmark">Building My Portfolio!</a></h1>
    <time class="date_alex" datetime="2016-07-01" itemprop="datePublished">Friday 01 Jul 2016</time>
    </header>
      <div class="postcontent_alex" itemprop="articleBody">
      <p><img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Ghost-Logo.svg" alt="" />
blah blah blah blog post stuff </p>
      </div>
    </article>
</main>
  </div>

编辑3：

以下是将包装器向下移动以清除导航栏的代码。

$(document).ready(function () {
  setupFixedNav();
  $(window).resize(function () {
    setupFixedNav();
  });
});

function setupFixedNav() {
  $('.wrapper_alex').css('margin-top',$('.header_alex').outerHeight(true));
  //Doesn't work
  //$('.wrapper_alex').css('padding-top',$('.header_alex').outerHeight(true));
}