显示内联CSS属性行为。有人可以解释一下吗？

Question

我使用了三个带有css样式的div作为显示内联块，具有一些特定的宽度和高度。正如一些文字正在推动的Div。谁能告诉我可能是什么原因？下面是代码

HTML：

<div></div>
<div>why this pushed down?</div>
<div></div>

Css：

div{
    display:inline-block;
    width:50px;
    height:150px;
    padding: 5px;
    background: #f00;
}

http://jsfiddle.net/P5HGJ/

Answer 1

每个元素的行为类似于块元素，但它保持内联。

您可以使用vertical-align：middle更改垂直对齐方式。

.show-inline{
    display:inline-block;
    width:50px;
    height:150px;
    padding: 5px;
    background: #f00;
    vertical-align: middle;
}

请参阅http://jsfiddle.net/7y7Hd/1/

了解https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

处的vertical-align

Answer 2

这与baseline有关。每当您使用inline-block时，基线都会根据字体的line-height计算得出。

因为外部<div>没有任何字体，所以不的基线与具有字体的基线具有相同的计算/位置。

您可以通过在所有<divs>上提供全局基线来解决此问题：

div{
    display:inline-block;
    width:50px;
    height:150px;
    padding: 5px;
    background: #f00;
    vertical-align: middle;
}

使用top，middle或bottom并不重要。只要基线在所有<div>上相同，就应该没问题

jsFiddle

Answer 3

inline-block使元素生成一个布局为的块框    如果它是一个内联框。

内联块以内联方式放置（即与相邻内容位于同一行），   但它表现得像个街区。