求指导：span的display为inline-block 和inline的时候对父级元素高度的影响?-灵析社区
金刚老六这样一段代码 ，如果设置 span的display为inline-block 则div的高度为30px； 如果设置span的display为inline 则div的高度为0. 请问这是什么原因？ 我的思路： 我知道行框盒子 和 幽灵空白节点。 对于display为inline-block 我能理解div的高度为什么是30px。每个行框盒子都以一个零宽度，带有元素字体以及行高属性的内框开始，我们称这个假想的盒子为'支柱' 那么为什么display为inline的时候 div的高度是0呢？ 难道此时就没有行框盒子吗？ 参考： 1. [https://blog.csdn.net/userkang/article/details/105161683](https://link.segmentfault.com/?enc=Cg9kg%2Ff1AJmxrVMUQTrXLA%3D%3D.RlzCUmwJJuhUE8Mhh1TmQ%2FIl%2Bj0cwdJ2Nf75cBbv91QO1%2BjqLzn03ADbjkCEnDtTq6GDuHxJyrF7OV8GPKm2cA%3D%3D) 这篇文中中提到了 为什么inline的时候高度为0， 但是这个解释我没有理解 
WhatUpDanger因为
"BFC" (https://link.segmentfault.com/?enc=6GGrcR4y3S%2B5Z055bMtNHw%3D%3D.6rfv2p%2Fw9fBkPhvY7%2Fm65HVqCn7ExdSFhdM1c6aXaG1DkQbvvd6DGs0Q4gxi6U6Gc%2BKC3vvcl1E2OIMz5xtSNsMctfRwRy7WiKEcJYsLV62HBGs4IRZcStnHlVwuj%2B%2B%2F)
和
"IFC" (https://link.segmentfault.com/?enc=DwVKQyF4NA%2BwhEP11yQKFQ%3D%3D.oIb5Lol%2BaWDD%2BubaURwzWVGa8OecMZAcglXb4LSQja58ySJf4y7%2FVhNpsM%2B4a2Ky%2Fsv9oIPAC7qZlmNSDcsGsa0q4mvbg9W5WQ7H5Fnciwc%3D)
的不同。比如说以下的例子中，只有包裹 "inline-block" 的 ".container" 容器会有高度。
.container {
background-color: red;
}
理解起来会很费劲，具体得解释可以查看以下两个问题：
* "Why Empty Display Inline Block Element Create Height But Display Inline and Display Block not? - Stack Overflow" (https://link.segmentfault.com/?enc=8o2s76r8zFqbSJ48B3lY0Q%3D%3D.ClPQg4IbF6OrXOoXxeWp3EGwQ6GMJmCBFk3ehobqGdSl7ZSiiioio3X02eSl9Tjan2R0aieNlEXwJAezjP30BWN451MnYHn1XhHScXsCtPJ9afu%2FxzY8u1S2s5UZrFa4fwpaGsud8283tgswIMi3A0Z4zsK2wG5Mk6pMpcIPzrY%3D)
* "html - How to determine height of content-box of a block and inline element - Stack Overflow" (https://link.segmentfault.com/?enc=BC2L%2FlvDoiYCve%2FlNYuYAQ%3D%3D.Y6iFldXHZA4%2B%2Fu3ZA5AlEozrPcgXyBJbzXiEHOdqbaICMLlJwbD%2BV4aBWbFZOEw%2BZ%2BnHg%2B%2BzN52%2BFWgdIWzvqHEwE3jIbjMuHRi59zaWiSpFdpvsEOq74Lw5%2FqCHOA7MfwjppRLGXT8nA07iPKYVx914%2BMHydt7OWg4E1KOA4cU%3D)
其他
"[css-display] Should 'run-in flow-root' blockify to 'block' or 'flow-root'? ·
Issue #1715 · w3c/csswg-drafts" (https://link.segmentfault.com/?enc=rsgBmabyt7d2d9SYYVyLKQ%3D%3D.p2NI7vNNlKI4BwlUefvTq3GJ1umVaNNDQQnHT79v3pY9pM%2F1nyCJ16bQh9SesKo3)