javascript - 如何让内联元素在空时占用空间？

Question

我有一个 h1 和 h3 标签，它们会使用 theater.js 清除自身和类型。问题是，当它自己删除为空时，它所在的 div 的高度会变小，然后当它再次有内容时会变大。

我想让 h1 和 h3 标签(或完全更改标签)即使在为空时也能保持其高度。

有什么想法吗？

Answer 1

只需使用 display: inline-block; 将 h2/h3 标签包裹在一个 div 中，如下所示:

<div class="header2"><h2>ABCD</h2></div>

然后将其添加到您的 css 中:

    .header2 {
      min-width: 100px;
      width: auto;
      min-height:45px;
      background-color:#333;
      color:#FFF;
      display:inline-block;
      padding:10px;
    }

这是具有上述属性的两个 h2 标签的 jsfiddle:https://jsfiddle.net/AndrewL32/e0d8my79/21/