Want to display a box where I set the color, but a span with no content doesn't render?

I have a span tag where I set a class to this:

.some-box {
  width: 16px;
    height: 16px;
}


<td>
<span cla开发者_如何学JAVAss="some-box" style="background-color:#333333;"></span>
</td>

It is just an empty box with a color, but it doesn't render anything currently.

How can I fix this?

I tried putting img tag inside with a transparent gif but that didn't work either.

Demo

.some-box {
  width: 16px;
  height: 16px;
  display:block;
}

only block level elements use width and height. span is inline by default.

have you tried adding display:block to the css of the span?

You cannot set the height or width of an inline element. Inline elements are elements that naturally display without "page-breaking" before and after the element. Divs for instance, are block level. To set the width and height of an inline element, you need to set the display property to block, like so.

span { display: block }