疑惑是最好的老师（一）

本文版权归郑哲明和饥人谷所有，转载请注明来源

---

这里记录我在学习前端过程中所遇到的困惑及自己的解答。

---

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