在前端开发中，经常会遇到关于元素布局和高度计算的问题。其中，标签的 display 属性设置为 inline-block 时父元素有高度，而设置为 inline 时父元素高度为 0，这背后有着特定的原因。

首先来看看 display: inline 的情况。当元素的 display 被设置为 inline 时，该元素会被当作行内元素处理。行内元素的特点是它不会换行，并且宽度和高度由内容决定，不会影响布局中的换行规则。对于父元素而言，它的高度计算是基于其内部行内元素的高度。然而，行内元素在布局时，不会创建一个独立的块级区域来容纳自身内容。这意味着父元素无法根据行内子元素来确定一个合适的高度，因此高度会被计算为 0。例如，在一个 <div> 父元素中放置几个 <span> 行内元素，若 <div> 设置为 display: inline，即使 <span> 有内容，父元素 <div> 也不会因为 <span> 的高度而增加自身高度。

接着探讨 display: inline-block。当元素设置为 display: inline-block 时，它兼具了行内元素和块级元素的部分特性。一方面，它像行内元素一样不会换行，在一行内排列；另一方面，它又像块级元素一样可以设置宽度和高度，并且会创建一个独立的块级格式化上下文（BFC）。在这种情况下，父元素内部的 inline-block 子元素会创建自己独立的渲染区域，父元素能够根据这些子元素的高度和宽度来计算自身的大小。也就是说，父元素可以感知到 inline-block 子元素的存在并根据其大小来确定自己的高度，所以父元素会有高度显示。

了解这两种 display 属性值对父元素高度的影响，对于精确控制页面布局、解决高度塌陷等问题至关重要。在实际开发中，开发者可以根据需求合理选择 display 属性，以实现理想的页面布局效果。