Make empty div of one line height - css

Question

Is it possible to create a rule that will make the following HTML:
<div style="width: 100%"></div>
of one line height using just CSS, or do I need to put as the content?

Answer 1

Some possibilities:
Set height (or min-height) to the line-height's used value.
The initial value of line-height is normal, whose used value is implementation-dependent, but the spec suggests a number between 1.0 and 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-height to 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 :empty pseudo-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-space to 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.

Answer 2

Just another solution:
.your-selector:empty::after {
content: ".";
visibility: hidden;
}

Answer 3

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.
If you know the exact line-height value for this element, then you can just explicitly set height to the same value. But, given your question, this is likely not the case.
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:
<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%"> </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:
div::before { content: '\00a0'; }
If the element may or may not have content but you want it to have a minimum height,
use min-height where you would have used height instead, or
select div:empty::before instead if you choose to use a pseudo-element so the filler doesn't get inserted if there is content.

Answer 4

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.
.your-selector:empty::before {
content: '\feff';
}
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):
.your-selector::before {
content: '\feff';
font-weight: 900;
}

Answer 5

The problem I had was with jQuery Terminal that needed to have empty line same size of normal lines. Other solution was problematic because when using fixed line-height there was gaps between lines also there was bug in Firefox that I've reported about layout with font-size + line-height.
By best solution so far is this:
div::before {
content: '\0200B';
float: left;
display: block;
}
and no line-height/min-height in the code and it works perfectly. Also when not using line-height it have good looking style selection without gaps.

Answer 6

What height do you want to keep? Will that be in relation with your font-size? That can be in em, pt, px or %.
This is just an example where 1.5em is arbitrary value:
<div style="width: 100%; height: 5px" ></div>
If you don't have anything to write in this div, use some height value.