爲什麼空div移動div的內容？

Question

我不明白爲什麼是空的div移動div的內容。

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    border: 2px solid #000; 
 
    display: inline-block; 
 
}

<div>a</div> 
 
<div></div>

Answer 1

您需要添加vertical-align對他們說：

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    border: 2px solid #000; 
 
    display: inline-block; 
 
    vertical-align:top; /* <-- SEE THIS? */ 
 
}

<div>a</div> 
 
<div></div>

Answer 2

改變風格

div { 
width: 100px; 
height: 100px; 
background-color: red; 
border: 2px solid #000; 
float:left; 
margin:0 2px; 
} 

https://jsfiddle.net/anwnacc2/

請日的jsfiddle