容器和文章元素之间的神秘差距

Question

任何人都可以帮助我解释为什么这篇文章的左侧是从该部分的顶部坐下来的？我已经在下图中看到了这一点。

我使用过Chrome开发者工具来尝试找到问题，但是我在间隙或边距中看不到任何表明此类行为的内容？

 main {
   border: 1px solid white;
 }
 main>section {
   border: 1px solid black;
 }
 main>section>h3 {
   border: 1px solid black;
   width: 98%;
   text-align: center;
   padding: 2px;
   margin: 2px 2px;
   height: 10%;
 }
 main>section>article {
   display: inline-flex;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   min-height: 300px;
   max-height: 400px;
 }
 main>section>article.aleft {
   border: 1px solid black;
   width: 28%;
   padding: 1px;
   height: 90%;
   margin: 1px 1px;
 }
 main>section>article.aright {
   border: 1px solid black;
   width: 68%;
   padding: 1%;
   height: 90%;
   margin: auto;
 }

<main id="content">

  <section class="part">

    <h3>Latest News</h3>

    <article class="aleft">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro at vero esse error eius laborum illum magni qui natus quisquam culpa, quaerat, ullam impedit. Nobis, repellendus itaque commodi! Iure, distinctio.
    </article>

    <article class="aright">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil aut quis mollitia, voluptates alias odit amet ullam praesentium molestias sapiente ex est. Repudiandae expedita cupiditate illo quis veritatis nemo, voluptates architecto incidunt ratione
      in, voluptate neque amet quaerat eligendi ipsum earum aliquid dolorum inventore non natus. Autem dignissimos similique at possimus voluptatum, hic vel sunt velit. Rerum blanditiis voluptate animi molestias, hic ab natus vitae, cum labore facere
      harum, placeat ea illum officia magni quis. Earum atque illum sit voluptate, veritatis asperiores, facere velit ipsam laborum hic iusto blanditiis possimus, molestias maxime sed! Excepturi nemo, rem quisquam quae, dolore magni.
    </article>

  </section>

</main>

Answer 1

这是由于文章元素上的填充不均匀造成的。

main > section > article.aleft {
    border: 1px solid black;
    width: 28%;
    padding: 1px;               /* pixel unit */
    height: 90%;
    margin: 1px 1px;
}

main > section > article.aright{
    border: 1px solid white;
    width: 68%;
    padding: 1%;               /* percentage unit */
    height: 90%;
    margin:auto;
}

匹配两者的单位 - 百分比或像素 - 解决了问题。

Answer 2

您可以使用此代码

main>section {
    border: 1px solid white;
    display: flex;
    flex-wrap: wrap;
}

并替换主要＆gt;部分

的CSS

希望这有帮助

保重和快乐编码