HTML -- Maintain vertical height of empty element

JavaScript
1

I’m working on my calculator project and want the display to be blank when no numbers have been entered yet. However, the HTML collapses to nothing if it is truly empty.

The sample project gets around this by providing a min height in pixels:

.formulaScreen {
  min-height: 20px;
  font-family: digital;
  font-size: 20px;
  color: orange;
  text-align: right;
  vertical-align: text-top;
  line-height: 20px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

However, I haven’t decided on final font sizes or anything yet. Is there any way to ensure there is one line (including top and bottom spacing as appropriate) of space in the element based on the font that WOULD be applied if there were text inside?

As you can see, I’m having a hard time explaining the issue, so my google searches have come up empty.

2

you can use the height property with relative unit, like 1em or 1rem

3

Okay, thanks! That worked (kind of!). By setting it to 1.5em it seemed to match up, but the 1em by itself does not seem to include some kind of vertical spacing in the text element. Is there a built in vertical spacing into the font that I can identify somewhere? I do not have one intentionally on that I’m aware of. I have bootstrap installed but there are no classes assigned to this element.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.