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

【问题标题】：How do I make an inline element take up space when empty?如何使内联元素在空时占用空间？
【发布时间】：2015-03-21 18:59:48
【问题描述】：

我有一个 h1 和 h3 标记，可以使用 theatre.js 自行擦除和键入。问题是当它自己擦除为空时，它所在的 div 的高度会变小，然后当它再次有内容时会变大。

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

有什么想法吗？

【问题讨论】：

你能发布一些代码或你尝试过的东西吗
...标题也不是内联元素...它们是块级的。

标签： javascript html css web

【解决方案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/

【讨论】：

如果没有必要，您可以删除最小宽度。我把它放在那里只是为了表明按钮甚至按钮宽度也可以保留
最好使用em 值而不是固定像素值。
@Paulie_D 同意，但这个小提琴只是为了展示如何在空标题标签中添加空格，所以我只是保留一些随机像素只是为了解释：)

【解决方案2】：

两种可能的解决方案：

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

例如：

div{min-height:50px;}

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

h1,p1 {

min-height:5px;

}

第二种方法的演示：

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

&lt;h1&gt;&lt;/h1&gt;

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

【讨论】：

好吧，我没有投反对票，但你的回答并没有解决根本问题。
@Paulie_D 他希望 div 即使在 h1 和 p 被删除时也应保持其高度。所以 min-height 会起作用。如果我错了，请纠正我
不...他希望空元素保留其高度，而不是父元素。
@Paulie_D 我读到的是{“它”的 div 的高度变小了……即使是空的也保持“它的”高度}。
你的意思是正确的 .header2 {min-height:50px; }

【解决方案3】：

您可以使用伪元素在元素内强制留出空白空间，然后用text-indent 将其扫掉

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 */
  }

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

否则，使用 :empty 伪类

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

&lt;h1 contenteditable="true"&gt;&lt;/h1&gt;

【讨论】：

我以前没有见过这种方法。我会试试看，看看效果好不好。
@SimonS 你也可以使用 :empty 伪类来添加一些内容，所以它永远不会为空（见 sn-p 在这里）