Caret styling in contenteditable div without text

Question

How do you style the caret for a contenteditable div when there is no text in the div.

Before text is entered:

After text is entered:

Notice how the caret on the before shot is up against the top of div, not vertically-centered like it is once text is entered. I know you can prepopulate the div with <br> before and it fixes it but I'm hoping there is a better solution. This is a minor thing that has been bugging me for a while.

Answer 1

I found the problem, you can't use line-height . You need to use padding . Here's the difference http://jsfiddle.net/frcso1n9/1/

HTML

<div class="lineheight">
    <div contenteditable="true"></div>
    <div contenteditable="true">with text</div>
</div>
<br>
<div class="padding">
    <div contenteditable="true"></div>
    <div contenteditable="true">with text</div>
</div>

CSS

.lineheight div {
    border: 1px solid black;
    height: 30px;
    line-height: 30px;
    margin-bottom: 5px;
}
.padding div {
    border: 1px solid black;
    margin-bottom: 5px;
    padding: 5px 10px;
}