内容推动div下降

Question

我有一个关于divs的问题。当我将内容添加到内部div 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是块级元素和一个块级元素总是开始一个新行，并采取增加全宽度av ailable

Answer 2

这种情况下的边距和填充不是造成它的原因。如果你有彼此堆叠的div，当你将内容添加到一个div时，它会增长，并推动下面的div。