html - 一个 div 中的填充会影响其他 div

Question

我有三个inline-block这样的div：

<div style="display:inline-block">div1</div>
<div style="display:inline-block; padding-top:5px">div2</div>
<div style="display:inline-block">div3</div>

我在第二个 div 中添加了一个填充以将其显示得更低一些，但这会使其他 div 也下降。如何仅使第二个 div 显示得更低？

这是一个 JSFiddle：http: //jsfiddle.net/mY6hP/

这里问了同样的事情，但接受的答案建议使用absolute定位，我不想这样做。

Answer 1

更改其他 div 的对齐方式，使它们在顶部对齐（通过vertical-align:top;）：

<div style="display:inline-block; vertical-align:top;">div1</div>
<div style="display:inline-block; padding-top:5px">div2</div>
<div style="display:inline-block; vertical-align:top;">div3</div>

Answer 2

尝试 float:left 而不是 inline-block 显示：

<div style="float:left">div1</div>
<div style="float:left; padding-top:5px">div2</div>
<div>div3</div>