Question

I have a <div>&nbsp;</div> which has the following styles:

background-position: 0 bottom;
background-repeat: no-repeat;
font-size: 0.01em;
overflow: hidden;

As far as I can tell, this should simply not appear on the site, but it renders as a dot similar to a full stop instead.

Changing the font-size to anything larger than 0.01em makes the dot disappear.

(The div doesn’t accomplish anything, but was recently noticed on a customers site and we wish to find out how this could happen?)

Any ideas what’s causing it to render as a dot? Or render at all?

Answer 1

The white-space will show. It is considered to have content, so it will display. In this case, as a dot.

The   is a non-breaking white-space and is treated differently by the browser than a normal white-space. For example, if you have the following element:

<span>&npsp;&nbsp;&nbsp;</span>

it will render with 3 spaces in the element. That is, the equivalent of three   character widths will be rendered in the span. This is often used by new developers to indent text instead of using CSS, but we know better, don’t we 😉

On the other hand, the following:

<span>   </span>

will render as a span element, and some browsers will consider it’s content empty and will not render unless it is given an explicit height and width (and display in this case) or a border, or padding which will give it a calculable width and height.