Cross-browser font height

As you see the outline is collapsed in the following sample:

Code:

---

var input = document.getElementById('input');
var output = document.getElementById('output');
input.addEventListener('input', function() {
  output.value = input.value;
});

output {
  display: block;
  font: 20px Arial;
  outline: 1px solid green;
}

<input id="input">
<output id="output"></output>

---

DEMO

How can I prevent it? Do I need to give the output a fixed height? If so, what value should I give to the height if I want it to be just as high as the text height — not an arbitrary number? Is there a cross-browser solution?

HTML:

Code:

---

<output id="output">&nbsp;</output>

---

To prevent the output box do disappear when delete everything using backspace update the css with :

Quote:

---

output {
display: block;
font: 20px Arial;
outline: 1px solid green;
min-height: 27px;
}

---

and also don't need the

Quote:

---

<output id="output">&nbsp;</output>

---

you cand use:

Quote:

---

<output id="output"></output>

---

Hope that is what you needed.