CSS 制作一行高度的空div

Make empty div of one line height

提问by jcubic

Is it possible to create a rule that will make the following HTML:

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

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

of one line height using just CSS, or do I need to put  as the content?

仅使用 CSS 的一行高度，还是我需要将其 作为内容？

回答by Oriol

Some possibilities:

一些可能性：

• Set height(or min-height) to the line-height's used value.

  The initial value of line-heightis normal, whose used value is implementation-dependent, but the specsuggests a number between 1.0and 1.2

  In my case (FF27 for winXP with font-family: "times new roman") that value is 1.25, so you could use height: 1.25em. However, that value might be different with other fonts or implementations.

  Then, it's better to manually set line-heightto some value, like line-height: 1.25em.

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

  <div></div>

  Note that if you want to set those styles to the elements only when it has no content, you can use the :emptypseudo-class:

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

  <div></div>

• Inserting some content to the element.

  For example, you can add a normal space and set white-spaceto pre-wrap(or pre) to prevent the space from collapsing:

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

  <div> </div>

  Alternatively, you can use a zero-width space(​)

  div { border: 1px solid red; }

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

  As you say,  would also work. However, it is a non-breaking space, so its purpose is preventing automatic line breaks. Then, using it would be semantically incorrect IMO.

  And as @BoltClock says, those whitespaces could be inserted with CSS pseudo-elements, but note that might not work on very old browsers.

• 设置height（或min-height）为line-height的使用值。

  line-heightis的初始值normal，其使用值取决于实现，但规范建议在1.0和1.2

  在我的情况下（带有 FF27 的 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伪类：

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

  <div></div>

• 向元素插入一些内容。

  例如，您可以添加一个普通空间并设置white-space为pre-wrap(或pre) 以防止空间折叠：

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

  <div> </div>

  或者，您可以使用零宽度空格( ​)

  div { border: 1px solid red; }

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

  正如你所说， 也将工作。然而，它是一个不间断的空间，所以它的目的是防止自动换行。然后，使用它在 IMO 语义上是不正确的。

  正如@BoltClock所说，这些空格可以插入 CSS 伪元素，但请注意，这可能不适用于非常旧的浏览器。

回答by BoltClock

That depends on your definition of a single-line height, since there isn't a CSS unit that corresponds to the computed line height of an element.

这取决于您对单行高度的定义，因为没有与计算出的元素行高相对应的 CSS 单位。

If you know the exact line-heightvalue for this element, then you can just explicitly set heightto the same value. But, given your question, this is likely not the case.

如果您知道line-height该元素的确切值，那么您可以明确设置height为相同的值。但是，鉴于您的问题，情况可能并非如此。

There is a unit that corresponds to font size, em, which you can use if the height of one line is equal to the computed font size:

有一个对应于字体大小的单位，em如果一行的高度等于计算的字体大小，您可以使用它：

<div style="width: 100%; height: 1em"></div>

Otherwise you will have to put in some sort of filler content. You can either throw in an  and be done with it:

否则，您将不得不放入某种填充物内容。您可以输入一个 并完成它：

<div style="width: 100%">&nbsp;</div>

Or go a little overkill by writing a CSS rule with a pseudo-element, but you must be able to target this element somehow:

或者通过使用伪元素编写 CSS 规则来有点矫枉过正，但您必须能够以某种方式定位此元素：

div::before { content: '
.your-selector:empty::after {
    content: ".";
    visibility: hidden;
}
a0'; }

If the element may or may not have content but you want it to have a minimum height,

如果元素可能有也可能没有内容，但您希望它具有最小高度，

• use min-heightwhere you would have used heightinstead, or

• select div:empty::beforeinstead if you choose to use a pseudo-element so the filler doesn't get inserted if there is content.

• 使用min-height您会使用的地方height，或者

• 选择div:empty::before代替，如果你选择使用伪元素，因此填料不会被插入，如果有内容。

回答by vothaison

Just another solution:

只是另一种解决方案：

.your-selector:empty::before {
    content: '\feff';
}

回答by Adam Leggett

The solution with visibility: hidden;is clever. It is simpler to set the content to Unicode character feff, which is the byte order mark. This has no width but has height; it behaves the same on every browser all the way back to IE6.

解决方案visibility: hidden;很聪明。将内容设置为 Unicode character 更简单feff，即字节顺序标记。这没有宽度但有高度；从 IE6 开始，它在每个浏览器上的行为都是一样的。

.your-selector::before {
    content: '\feff';
    font-weight: 900;
}

I have found that WebKit (at least on Mac OS) applies slightly different (1px) line height to bold text than normal text for some fonts. To enforce uniformity (in this case, we would need to apply even to non-empty selectors):

我发现 WebKit（至少在 Mac OS 上）对粗体文本应用的行高与某些字体的普通文本略有不同（1px）。为了强制统一（在这种情况下，我们甚至需要应用到非空选择器）：

##代码##

回答by Ritesh A

What height do you want to keep? Will that be in relation with your font-size? That can be in em, pt, px or %.

你想保持什么高度？这与您的字体大小有关吗？可以是 em、pt、px 或 %。

This is just an example where 1.5em is arbitrary value:

这只是一个例子，其中 1.5em 是任意值：

<div style="width: 100%; height: 5px" ></div>

<div style="width: 100%; height: 5px" ></div>

If you don't have anything to write in this div, use some height value.

如果您在此 div 中没有任何内容可写，请使用一些高度值。