Fixed padding in contenteditable element

Question

The padding of a textarea is always fixed. When the text content of the textarea is scrolled, the padding remains near the edges.

The padding of a contenteditable element behaves differently. When the text content of the element is scrolled, the padding moves with it.

This demo illustrates the difference.

Can a contenteditable element by styled so its padding behaves more like textarea padding, staying in place while the text content is scrolled?

Answer 1

The answer to your specific question of whether a non-textarea "contenteditable" block level element's padding can behave like a textarea's is "no."

There is likely a way to achieve this look by adding additional elements to your div, but the padding of your div will always behave as padding is designed to.

Your padding issue has nothing to do with the "contenteditable" property. You could take the "cnotenteditable=true" off of your div, and the padding behaves the same way. Padding "clears an area around the content" of the element, which in this example is the text in your div. The padding will always remain around the text, not around the inside of the div.