I want to create a boxed border around some text, specifically numbers. But I want the box to be the same size, no matter if its a single digit number or a triple digit number. I've tried a couple things, but every time the border just wraps the number. The number will be wrap with the <strong> tag.
strong{
border: 1px;
border-style: solid;
font-size:12px;
}
3 Answers
As said in the comments, wrap your text using a div of fixed width and style the div with a border. Here is a live example:
#theDiv {
width: 300px;
border: solid red 2px;
}<div id="theDiv">
Your Content
</div>You have to give a fixed width to that element
strong {
display: inline-block;
width: 50px;
border: 1px solid #000;
text-align: center;
}
I suggest using <div> tag in this situation (remember that you can place a div inside of div!) as it would look neat and you could do it pretty neatly. However it is also possible to make such a thing with 'padding:x' on CSS style sheet, but I do not suggest this way as it would be less efficient than div.
When you write your divs surrounding those numbers, define a class for all of them. Let's say <div class="numberBoxes"></div> (between would be that number), then go to CSS stylesheet and write .numberBoxes { } inside of curly braces design that border (remember to put width and height of div! It won't show up, if you don't!)
