内在的内容推动了div

Question

我对div有疑问。当我向内部divs div添加内容时，我在parrent div中有多个div。内部div被推下来了？

我想知道为什么？因为我的所有边距和填充都是默认的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是块级元素，块级元素总是从新行开始并占用可用的全宽度

Answer 2

在这种情况下，边距和填充不是导致它的原因。如果您将div堆叠在一起，当您将内容添加到其中时，它会增长并将下方的div推下来。