Drawing empty inline boxes in CSS?

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>

---

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: alt text http://img413.imageshack.us/img413/5865/boxes.png

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

---

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.

---

Other people's answers have included the correct inline style syntax, but I thought I'd point it out explicitly:

Your original style rules look like this:

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

That should look like this:

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

The equals signs don't belong in css syntax like that, colons are what is needed there.

That, along with display:inline-block on the span, as other people suggested, worked for me. Like this:

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

---

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]

---

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!

---

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)...

---

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

---

It seems that width: 17px doesn't work on inline or inline-block elements. But in turn why not make tricks on block elements and let them shows as inline elements via float: left?

This is what I have tried:

<html>
<head>
<style>
.container div {
    float: left;
    height: 20px;
}
</style>
</head>
<body>
<div class='container'>
    <div style='width: 20px; border: 1px solid red;'></div>
    <div>Text</div>
    <div style='width: 20px; border: 1px solid red;'></div>
</div>
<div style='clear: both'></div>

---

Don't quite understand your update, but in general to draw a set of small, empty, inline boxes in HTML a table would be the easiest method so I'll leave this here incase it helps.

Simply define the table ...

   <table>
       <tr>
           <td id=one></td><td id=two></td><td id=three></td>
       </tr>
   </table>

Then format the table data using your .css like so ...

    tr{  height: 60px;}
    th, td{ width: 100px;}
    #one{   border:10px solid blue;}
    #two{   border:10px solid red;}
    #three{ border:10px solid green;} 

Depending one how you want the text positioned, un-formatted table cells might be appropriate as well. Hope this helps.

---

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>