为什么空div用内容移动div？

Question

我不明白为什么空div用内容移动div。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要向他们添加vertical-align：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

更改样式

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

https://jsfiddle.net/anwnacc2/

请检查jsfiddle