CSS box around text, set box size

Question

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;
}

Then why not place your text in a div with a fixed width and height styled with a border? — , Aug 16 '15 at 22:44

score 4 · Answer 1 · answered Aug 16 '15 at 22:47

4

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>

answered Aug 16 '15 at 22:47

Maximillian Laumeister

19,884
8
59
78

score 1 · Accepted Answer · edited Jan 02 '22 at 15:32

1

You have to give a fixed width to that element

strong {
    display: inline-block;
    width: 50px;
    border: 1px solid #000;
    text-align: center;
}

http://jsfiddle.net/Lcpvgykr/

edited Jan 02 '22 at 15:32

bad_coder

11,289
20
44
72

answered Aug 16 '15 at 22:52

evrim oku

229
1
7

1

This will not work. http://stackoverflow.com/questions/5137772/how-to-set-width-of-a-inline-element You need to change display property, too. – sinisake Aug 16 '15 at 22:55
1

thanks @nevermind. i forgot to add that. i must have been excited, this was my first post :) – evrim oku Aug 16 '15 at 23:04

score 0 · Answer 3 · answered Aug 16 '15 at 22:51

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

CSS box around text, set box size

3 Answers3