並排對齊 div

Question

我想並排對齊 div，但填充不允許 div 並排對齊，並且我不允許刪除填充或更改任何內容。 只需要添加一個屬性，我不知道我應該添加什么屬性。

這是代碼：

 body { padding: 30px; } section { background: lightgreen; width: 75%; float: left; } article { background: white; margin: 0 0 1rem 0; } aside { background: pink; width: 25%; float: right; } header, article, section, .module { padding: 1rem; }

 <section> <article> <h2>Title</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo molestias ex officia eligendi reiciendis fuga magnam? Ullam ut ab doloremque accusamus iusto aliquam facilis sapiente, </p> </article> <article> <h2>Title</h2> <p> Lorem ipsum dolor sit amet. consectetur adipisicing elit? Nemo molestias ex officia eligendi reiciendis fuga magnam, Ullam ut ab doloremque accusamus iusto aliquam facilis sapiente. </p> </article> </section> <aside> <div className="module"> <h3>Module</h3> <p> Lorem ipsum dolor sit amet? consectetur adipisicing elit. Optio rem ab delectus fugit repellendus perspiciatis dolor consequuntur tenetur voluptatem a vitae odit aspernatur? Voluptas quisquam corporis nostrum aspernatur aliquid harum saepe ab pariatur veniam iste ipsam alias nemo voluptatibus doloribus. </p> </div> </aside>

Answer 1

box-sizing CSS 將解決此問題。
將默認box-sizing屬性添加到邊框框

* {
    box-sizing: border-box;
}