html - 内部内容将 div 向下推

Question

我有一个关于 div 的问题。当我将内容添加到内部 div 时，我在父 div 中有多个 div。内部 div 被向下推？

我想知道为什么？因为我所有的margins和padding都是加default 0;

感谢您的宝贵时间。

https://jsfiddle.net/3w50gj28/

<div class="boxes">
<div class="box">
    <h3>MyBMW Login</h3>
    <form class="" action="index.html" method="post">
        <input type="text" name="email" placeholder="Emailadres">
        <input type="password" name="password" placeholder="Wachtwoord">
    </form>
</div>
<div class="box">

</div>
<div class="box">

</div>
<div class="box">

</div>

---

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.boxes {
margin-top: 25px;
width: 100%;
position: relative;
text-align: center;

.box {
    display: inline-block;
    width: 300px;
    max-height: 400px;
    min-height: 233px;
    padding: 15px;
    border: 1px solid #e6e6e6;
    overflow-wrap: break-word;
    background-color: #fff;
    margin-right: 20px;;
}

Answer 1

div 是 block 级元素， block 级元素总是在新行开始并占据可用的全部宽度