Question

我有一个h1和h3标签，它将使用theater.js擦除自身并输入。问题是，当它将自己清除为空时，它所处的div的高度会变小，然后当它再次有内容时会更大。

我想让h1和h3标签（或完全更换标签）保持高度，即使是空的。

有什么想法吗？

Answer 1

只需将h2 / h3标记包含在display: inline-block;的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/

Answer 2

两种可能的解决方案：

1）您可以将min-height设置为div

例如：

div{min-height:50px;}

2）或设置h2和p1标签的最小高度

h1，p1 {

min-height:5px;

}

第二种方法的演示：

h1{
    background:yellow;
    min-height:5px;
}

<h1></h1>

注意：正如paulie_D所提到的，默认情况下，h1，p和div是块级元素

Answer 3

您可以使用伪元素强制元素中的空白空间并使用text-indent

将其移走

＆＃13;

h1.fixed:before {
  content:' ';
  display:inline-block;
  width:1em;
}
h1 {
  background:lightgray;
  box-shadow:inset 0 0 0 1px;
  }
h1.fixed {
  text-indent:-0.8em; /* swip off the pseudo element */
  }

＆＃13;

<h1 contenteditable="true"></h1>
<h1 class="fixed" contenteditable="true"></h1>

＆＃13;

否则，使用：empty伪类

＆＃13;

h1:empty:before {
  content:'|';
  }

＆＃13;

<h1 contenteditable="true"></h1>

＆＃13;

如何使内联元素在空时占用空间？

3 个答案: