为什么空 div 用内容移动 div？ [复制]答案

【问题标题】：Why is the empty div moving the div with content? [duplicate]为什么空 div 用内容移动 div？ [复制]
【发布时间】：2017-01-21 12:09:10
【问题描述】：

我不明白为什么空 div 会随着内容移动 div。

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

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

【问题讨论】：

空 div 难以确定其基线的位置。解决方案：通过设置 vertical-align 属性将它们相互对齐。

标签： html css

【解决方案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>

【讨论】：

哦，你在关闭后回答了这个问题。做得好。投赞成票。
@MrLister - 感谢您对我的垃圾投赞成票。

【解决方案2】：

改变风格

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

https://jsfiddle.net/anwnacc2/

请检查 jsfiddle

【讨论】：

div { 宽度：100px;高度：100px；背景颜色：红色；边框：2px 实心#000；向左飘浮;边距：0 2px； } 使用这种风格，它会使 div 并排