Maintaining border size - html

Question

I have this CSS class:
.numberCircle {
border-radius: 30%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 0px 5px 0px 5px;
background: #fff;
border: 2px solid #333;
color: #333;
text-align: center;
font-size: large;
font-weight:bold;
}
I want to keep the same border width even when the number changes, from 10 to 9.
Right now, the border expands when the number changes.
Here's a JFiddle of what I mean.
I've already tried changing the padding attribute but I can't make it work.

Answer 1

Try this. Add display:inline-block and then line-height to vertically align the numbers. By setting this the box will expand. adjust the height & width as per your need. If so, do not forget to adjust the line-height relative to height of the box.
.numberCircle {
border-radius: 30%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
line-height:36px; /*vertcally center the numbers*/
width: 36px;
height: 36px;
padding: 0px 5px 0px 5px;
display:inline-block; /* Added */
background: #fff;
border: 2px solid #333;
color: #333;
text-align: center;
font-size: large;
font-weight:bold;
}
<span class='numberCircle'>10</span>
<span class='numberCircle'>9</span>

Answer 2

You can just explicitly set the width. I suggest a unit of mesure that's relative to the font size (namely ems)
Edit: it seems all you were missing was display:inline-block. You can't set the width of an inline element. Adding it will probably get you most of the way there.
.numberCircle {
border-radius: 30%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
/*width: 36px;
height: 36px;*/
padding: 0px 5px 0px 5px;
background: #fff;
border: 2px solid #333;
color: #333;
text-align: center;
font-size: large;
font-weight:bold;
display: inline-block;
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
}
<span class='numberCircle'>10</span>
<span class='numberCircle'>9</span>

Answer 3

Check out these properties:
line-height:20px; /*this will center your numbers inside the border*/
width: 20px; /*set the same as line-height and height in order to give a square shaped border*/
height: 20px; /*set the same as line-height and width in order to give a square shaped border*/
display: inline-block;
line-height, width and height will shape your box. While the new display property will help to align the elements in a "one after the other" fashion. :)