Question: When there is an empty `div` with `contenteditable="true"`:

CSS:

```
[contenteditable="true"] {
    border: 1px dashed #dedede;
    padding: 3px;
}

```

HTML:

```
<div contenteditable="true">
    <!-- blank by default -->
</div>

```

In IE and Chrome, it shows the height like a normal input field with small padding. In Firefox, it only shows that 3px padding I added in the styles. W/o that, it collapses and is only as tall as the border.

Do you know if this is a Firefox bug? Can you suggest a way to handle it?

Answer: 
workaround:

```
[contenteditable='true']:before {
    content: "\feff ";
}

```

[CSS2 section 10.6.3](http://www.w3.org/TR/CSS2/visudet.html#normal-block):

> 
> The element's height is the distance from its top content edge to the first applicable of the following:
> 
> 
> 1. the bottom edge of the last line box, if the box establishes a inline formatting context with one or more lines
> 2. the bottom edge of the bottom (possibly collapsed) margin of its last in-flow child, if the child's bottom margin does not collapse with the element's bottom margin
> 3. the bottom border edge of the last in-flow child whose top margin doesn't collapse with the element's bottom margin
> 4. zero, otherwise
> 
> 
> 

For this empty div,

1 through 3 are not applicable, since the div is empty. It has no line boxes or children.
Item 4 therefore applies.

The workaround enforces at least one line box inside the div, so that it gets nonzero height.
This works just fine for me in firefox

<http://jsfiddle.net/D6D6A/>

html:

```
<div contenteditable='true'></div>

```

css : *changed to black border so easier to see*

```
[contenteditable='true'] {
    border: 1px dashed #000;
    padding: 3px;
}

```

notice if you change padding to 0px , it has no height. However, with the 3px padding, it works like it should.