show background of empty span

Question

Let's say that I have a span and I set an image as the background of the span like this:

<span style="background:url("my_image.png") no-repeat;"></span>

As you can see above, my span is empty. If I put some content in my span like:

<span style="background:url("my_image.png") no-repeat;">Some content...</span>

I can see the background image of the span with no problem. But If I leave the span empty I don't see the background image. I figured that I could solve this issue by adding some padding to my span like:

<span style="background:url("my_image.png") no-repeat;padding:20px;"></span>

But is there another way I can do this without adding some padding to my span and keep my span empty?

Thank you

Answer 1

You get the same effect by using inline-block but setting width and height instead of using padding.

<span style="background:url('my_image.png') no-repeat; display: inline-block; width: 40px; height: 40px;"></span>

Also, something else that could trip you up is you are using double-quotes inside of an HTML attribute, which would confuse a parser and could lead to unexpected results. I've changed them to single quotes in the code I posted above, although no quotes would do just as well.

Answer 2

just don't make it empty: put a 'blank' inside. There are three ways, to do that:

1. simple space and add style white-space: pre; to it

2. Non-breaking Space   or  

3. The non plus ultra is, to let css do the trick for you:

add this style to your span:

 :before {
    content: "\200D";
    display:inline;
 }  

What happens:

you add a content before (or better "in front inside") your span, that displays a ZERO WIDTH JOINER, and your span is not empty enymore