为什么我的inline-block的申报单时，只有其中一人有文字不对齐？我的、申报单、一人、文字
这里直播网页。。的
鉴于此HTML页面：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆LT;元的charset =UTF-8＆GT;
＆LT;冠军＆GT;＆LT; /标题＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆lt;节的作用=主＆GT;＆lt;物品＆GT;
Java的
＆LT; /条＆GT;＆lt;物品＆GT;
＆LT; /条＆GT;＆LT; /节＆gt;
＆lt;节的作用=主＆GT;＆lt;物品＆GT;
Java的
＆LT; /条＆GT;＆lt;物品＆GT;
JavaScript的
＆LT; /条＆GT;＆LT; /节＆gt;
＆LT; /身体GT;
＆LT; / HTML＆GT;
当我申请了下面的CSS：
部分[作用=主] {
保证金：1EM;
宽度：800px;
边界：1px的固体＃999;
}
第[作用=主]文章{
宽度：320px的;
高度：180px;
保证金：1EM;
显示：inline-block的;
边界：1px的纯黑色;
}
我希望我的两个文章的对齐，而是因为它可以在下面的截图中可以看出，只有当我的文章有文字的＆lt;物品＆GT; 元素居中对齐：
任何想法是什么原因造成这种行为，怎么能解决吗？
解决方案
这是在CSS中的基线垂直对齐的后果。从 CSS 2.1规范，部分10.8行高算了一笔账：行高和垂直对齐的财产
基线
对齐盒的基线与父盒的基线。 如果包装盒 没有一个基准，配合家长的基准底边边缘。（我的重点）
由于默认对齐方式为内联块是基线，除非它被覆盖，该规则适用。当文字被放在inline-block的，该文本将创建为inline-block的，第一个（非粗体）判决适用的基准。
当有一个在inline-block的没有文字，那么它有没有底线，因此第二（加粗）的句子适用。
在这里的jsfiddle： http://jsfiddle.net/WjCb9/1/ 我从你的榜样删除了保证金：1EM 这是创建（至少对我来说）一个误导性的幻想，并添加文本基线显示，其中包含框的基线。基线是沿字基线的底部，所以你可以看到，空inline-block的有它的底边边缘与父母的基线对齐所要求的上面的CSS规则。
Live page here.
Given this HTML page:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<section role="main"><article>
Java
</article><article>
</article></section>
<section role="main"><article>
Java
</article><article>
JavaScript
</article></section>
</body>
</html>
When I apply the following CSS:
section[role=main] {
margin: 1em;
width: 800px;
border: 1px solid #999;
}
section[role=main] article {
width: 320px;
height: 180px;
margin: 1em;
display: inline-block;
border: 1px solid black;
}
I expect both of my articles to be aligned, but as it can be seen in the screenshot below, only when both of my articles have text the <article> elements are center aligned:
Any ideas what is causing this behavior and how can it be fixed?
解决方案This is the consequence of the "baseline" vertical alignment in CSS. From the CSS 2.1 spec, section 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties
baseline
Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline. (my emphasis)
Because the default alignment for the inline-blocks is "baseline", unless it is overridden, this rule applies. When text is put in the inline-block, that text will create a baseline for the inline-block and the first (non-bolded) sentence applies.
When there is no text in the inline-block, then it has no baseline and so the second (bolded) sentence applies.
In the JSFiddle here: http://jsfiddle.net/WjCb9/1/ I have removed from your example the margin:1em which was creating (at least for me) a misleading illusion, and added the text baseline to show where the baseline of the containing box is. The baseline is along the bottom of the word "baseline", so you can see that the empty inline-block has its bottom margin edge aligned with the parent's baseline as required by the CSS rule above.
