<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <title>white-space pre: zero width non-breaking space</title> <style type="text/css"> /* setup */ .control { display: inline; font: 1em/1 Ahem, sans-serif; background: red; color: white; } td * { white-space: pre; font: inherit; } div { display: block; } span { display: inline; } /* test */ td { font: 20px/1 Ahem; color: maroon; background: red; padding: 0; } span { background: lime; } div { color: green; } </style> </head> <body> <div class="control">Ahem_font_required_for_this_test.</div> <p>There should be no red below, only a green square bordered in green.</p> <!-- U+00A0 is exactly equivalent to U+200B U+0020 U+200B --> <table> <tr> <td> <div>XXXXX</div> <div><span>X   X</span></div> <div><span>X​ ​ ​ ​X</span></div> <div><span>X ​ ​ X</span></div> <div>XXXXX</div> </td> </tr> </table> </body> </html>