Drawing empty inline boxes in CSS?

Question

I'm sure this is very simple, but I'm trying to draw a set of small, empty, inline boxes in HTML like the following:

<span style="border:1px solid black;height=10px;width=17px"></span>

Earlier, did simple .gif images earlier but looked fuzzy as the browsers' displays are scaled up or down.

<span> however being an inline element does not honor the height and width properties. And of course using <div style="display:inline;... exhibits the same behavior in that it then won't honor those properties.

Can you please suggest a CSS'y way?

---

Update Assume the following, if I float it it will bond to the right or left of the text and I need it inlined to the text based upon the browser's width, &c

<p>Lorem ipsum dolor sit amet, <INSERT BOX HERE> consectetur adipisicing 
elit, <INSERT OTHER BOX HERE> sed do eiusmod tempor incididunt ut labore et 
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>

Answer 1

You could try out the css display parameter inline-block. But your mileage my vary with this one.

display: inline-block

An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block.

Answer 2

You could use display: inline-block. Though this won't work in old browsers like IE 6.

Depending on where you want the items located, you could do display:block; float:[left or right]

Answer 3

height and width can only be applied to elements with hasLayout property. SPAN element by default does not implement this property.

Because inline-block does not work correctly on all major browsers I would recommend using padding-dimension trick:

<span style="font-size:30px; padding-left:30px; background:red;">&nbsp;</span>

You might need to play a little bit with dimensions because global font-size, font-family and line-height can affect the real size of your box.

Edit: Drawing empty boxes is the bit I missed, but I think it is quite obvious from my code anyway. If not, this is another example:

<style type="text/css">
.box1 { font-size:15px; font-family:Tahoma; padding-left:15px; border:1px solid red; overflow:hidden; }
.box2 { font-size:10px; font-family:Tahoma; padding-left:15px; border:1px solid green; overflow:hidden; }
.box3 { font-size:5px; font-family:Tahoma; padding-left:5px; border:1px solid blue; overflow:hidden; }
</style>

This is red box: <span class="box1">&nbsp;</span> and this is green box: <span class="box2">&nbsp;</span>.
And this is another box, this time it is blue: <span class="box3">&nbsp;</span>.

And this code produces this as an output:

And because we put   inside every span, this trick will work on all browsers.

Answer 4

How about

<div>
    <div style="border: 1px solid #000; height: 10px; width: 17px; float: left"></div>
    <div style="border: 1px solid #000; height: 10px; width: 17px; float: left"></div>
    <br style="clear: both;" />
</div>

Answer 5

You are right, span does not honour width and height, however, it does sort of honour padding.

You can set the width of your box easily giving it a left and / or right padding.

The height is a bit trickier as an empty span seems to have a height so you need to set the font-size to 0.

span.box {
    padding: 5px 8px;    // height 10, width 16
    font-size: 0px;
}

And of course it does not work in IE7 (and probably IE6), at least in IE7 compatibility mode the box magically disappears when it's empty and doesn't show the bottom border when I put a non-breaking space in it (which messes up the width anyway)...

Answer 6

Lots of good suggestions on this page. I'm wondering, though, when you tried using a GIF, was the border part of your graphic?

How about using a transparent 1x1 gif that you can size with CSS, then apply border:1px solid black to the image. If you tried incorporating the border as part of the image, I understand stretching it would cause it to look fuzzy. But a transparent GIF with a CSS border should look nice enough, unless you had some other styling you needed on it...

Good luck!

Answer 7

I believe this works.

 <span style="display:inline-block;border:1px solid #00ff00;width:150px;height:50px;"></span>

pretty sure that'll work cross-browser