Consider these two chunks of "confusables" Unicode text (in snippet).

The first one has (two) extra line breaks or extra space of some kind in it and looks awful, while the second one displays quite nicely. I've tried all the white-space CSS options but none have any effect on the empty space. (Pasting the same text into Notepad, the extra space disappears)

Can anyone enlighten me as to why this effect is occurring in one div and not the other, and how can I get rid of this ugly empty space?

div {
 background-color:#f5f5f5;
 white-space:pre-line;
}

Extra lines/space:
<div>“