Phenomenon
In a plain contenteditable element, pressing Enter inserts two visible line breaks instead of one.
The resulting DOM contains nested <div> or <br> elements that render as an extra blank line.
Reproduction example
- Focus the editable area.
- Type a short word on the first line.
- Press Enter once.
- Type another word on what appears to be the second line.
Observed behavior
- The visual gap between the lines is larger than a single line height.
- Inspecting the DOM shows two consecutive block-level containers or a sequence of
<br>elements that corresponds to two line breaks.
Expected behavior
- Pressing Enter once inserts a single paragraph break.
Notes and possible direction for workarounds
- Check whether the browser uses
<div>,<p>, or<br>to represent paragraph breaks in this configuration. - Adjust CSS line-height and margins to verify whether the effect comes from DOM structure or styling.
- For products that must normalize the markup, consider translating the native structure into a
controlled model (for example, a single
<p>per line) before storing or diffing the content.