制作一行高的空div

是否可以创建一个规则来生成以下 HTML：

<div style="width: 100%"></div>

只使用 CSS 的一行高度，或者我需要把 作为内容？

一些可能性：

• Set height https://developer.mozilla.org/en-US/docs/Web/CSS/height (or min-height https://developer.mozilla.org/en-US/docs/Web/CSS/min-height）到line-height https://developer.mozilla.org/en-US/docs/Web/CSS/line-height's 使用价值 http://www.w3.org/TR/CSS21/cascade.html#used-value.

  初始值line-height is normal，其使用值取决于实现，但是spec http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height建议之间的数字1.0 and 1.2

  就我而言（FF27 for winXP 与font-family: "times new roman"）该值是1.25，所以你可以使用height: 1.25em。但是，该值可能与其他字体或实现不同。

  那么最好手动设置一下line-height达到某个值，例如line-height: 1.25em.

  div {
    border: 1px solid red;
    min-height: 1.25em;
    line-height: 1.25;
  }

  <div></div>

  请注意，如果您只想在元素没有内容时将这些样式设置为元素，则可以使用:empty https://developer.mozilla.org/en-US/docs/Web/CSS/:empty伪类：

  div:empty {
    border: 1px solid red;
    height: 1.25em;
    line-height: 1.25;
  }

  <div></div>

• 向元素插入一些内容。

  例如，您可以添加一个普通空间并设置white-space https://developer.mozilla.org/en-US/docs/Web/CSS/white-space to pre-wrap (or pre）以防止空间塌陷：

  div {
    border: 1px solid red;
    white-space: pre-wrap;
  }

  <div> </div>

  或者，您可以使用零宽度空间 https://en.wikipedia.org/wiki/Zero-width_space (​)

  div { border: 1px solid red; }

  <div>​</div><!-- There is a zero-width space inside -->

  正如你所说， 也会起作用。然而，它是一个不间断的空格，所以它的目的是防止自动换行。那么，在我看来，使用它在语义上是不正确的。

  正如@BoltClocksays https://stackoverflow.com/a/19348054/1529630，这些空格可以用 CSS 伪元素插入，但请注意，这可能不适用于非常旧的浏览器。