html - 崩溃 margin 问题

Question

我正在尝试解决 margin 崩溃问题。我不明白为什么段落重叠。我真的很想知道为什么会出现这个问题。我认为这就像崩溃的 margin 问题。

请看吹

这是我的html

    <div class="menu_list open">
      <ul>
        <li><a href="#/" class="router-link-active">Home</a></li>
        <li><a href="#/Story" >Story</a></li>
        <li><a href="#/Brands" >Brands</a></li>
        <li><a href="#/news" >News</a></li>
        <li><a href="#/contact" >Contact</a></li>
      </ul>
    </div>
    <div  class="company_detail_container container" style="background: #c9bbbb;">
<main  class="company_detail">

    <p >
    The new legislation would also sharply limit President Donald Trump's ability to lift any sanctions against Russia.
    He has previously said he needs diplomatic leeway with the Kremlin.
    Mr Trump's time in office has been dogged by claims that Russia tried to influence last year's US election.
    Moscow denies any wrongdoing but several US investigations are looking into whether anyone in the Trump campaign colluded with Russian officials.            </p>

</main>
</div>

这是我的CSS

.menu_list{
  width: 100%;
  height: 200px;
  top: 0;
  left: 0;
  opacity: 1;
  position: relative;
  padding: 10px;
}  

.menu_list li{
      display: block;
    list-style: none;
    padding: 10px;
    border-bottom: 1px solid black;
    text-align: center;
}
p {
    margin: 0 0 10px;
}

请给我任何想法

https://codepen.io/jeonghu/pen/KvKPPO?editors=1100

Answer 1

原因很简单，您将 .menu_list 的高度固定为 200px。删除该设置(将 height 设置为 auto)并且它不再重叠

https://codepen.io/anon/pen/qXBWvK?editors=1100