疑惑是最好的老师（一）疑惑是最好的老师（一）

本文版权归郑哲明和饥人谷所有，转载请注明来源
这里记录我在学习前端过程中所遇到的困惑及自己的解答。
1、使用display:table-cell垂直居中为什么需要上级元素display:table？
display：table和display：table-call的元素宽度都会收缩（即内容必要宽度）；父元素display：table，同时子元素display：table-cell，子元素会撑满父容器，此时对子元素使用vertical-align，垂直居中会起作用。
这其中的关键是 display：table-cell元素的高度要写死（百分比不起作用），此时垂直居中有效，display：table倒并不是必要条件。
2、为什么display：table-cell的元素脱离普通流后，vertical-align：middle无效？

文章图片
vertical-align无效暂时不清楚。
3、为什么display：table-cell的元素使用margin无效？

Applies to: all elements except elements with table display types other than table-caption, table and inline-table
除了 display 為 table 的屬性不支援外，適用所有元素（包含 table-caption, table, inline-table ）。

文章图片
display:table-cell的元素控制间距

为什么img的下方有空隙？如下图

文章图片
2016-07-12 15 37 00.png 不仅仅是img有，本质原因是这两个属性的影响：display:inilne-block或display：inline、vertical-align：baseline。
默认图片的基线在图片底端，当有vertical-align：baseline时，元素基线即与line box 基线对齐，baseline的下方给字母留出一点空间，即形成空隙。解决方案就是改变line box 的baseline的位置。
【疑惑是最好的老师（一）】注意图片的vertical特性：图片撑开了line box的高度，line box的基线将随图片变动。
参考：
vertical-align:You need to konw