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

Question

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

我想让h1和h3标签（或完全更改标签）即使为空也保持其高度。

你有任何想法吗？

- therealscifi

---

你能贴一些你尝试过的代码或其他东西吗？ - AndrewL64

标题也不是内联元素，它们属于块级元素。 - Paulie_D

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/

- AndrewL64

---

如果不需要的话，你可以移除min-width。我只是将它保留在那里，以显示按钮的宽度也可以保持不变。 - AndrewL64

最好使用em值而不是固定像素值。 - Paulie_D

@Paulie_D 同意，但这个示例只是为了展示如何在空的标题标签中添加空格，所以我随便添加了一些像素，仅供说明目的 :) - AndrewL64

"只是"? 必须有更简单的方法。 - David Spector

@DavidSpector 哈哈，什么？ - AndrewL64

Answer 2

有两种可能的解决方案：

1）您可以将最小高度设置为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默认是块级元素。

- A.B

---

我没有给你的回答点踩，但是它并没有解决根本问题。 - Paulie_D

@Paulie_D 他希望当h1和p被删除时，div仍然保持其高度。所以使用min-height属性可以实现这个效果。如果我理解错了，请纠正我。 - A.B

不...他希望空元素保持其高度，而不是父元素。 - Paulie_D

@Paulie_D 我读到的是 {div的高度“它的”在变小...即使为空，也要保持“它的”高度不变}。 - A.B

@Paulie_D 你是对的^_^不过这个HTML只包含了H1标签 - Hatem Ahmed

Answer 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:'|';
  }

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

- G-Cyrillus

---

我以前没见过这种方法。我会试一下，看看它是否运行良好。 - therealscifi

@SimonS 你也可以使用:empty伪类来添加一些内容，这样它就不会为空了（参见上方的片段）。 - G-Cyrillus

Answer 4

不要擦除H1元素的内容，而是将其设置为 。这个实体会被渲染成一个空格。这样可以隐藏元素，但仍然占据所需的垂直空间。希望这不会混淆屏幕阅读器（对于盲人用户来说）。

- David Spector