CODEWITHSUNDEEP
htmlcss
Shawn Sonnier
Shawn Sonnier

Reputation: 533

CSS box around text, set box size

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

Upvotes: 5

Views: 59986

Answers (3)

evrim oku
evrim oku

Reputation: 229

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/

Upvotes: 1

Zyberg
Zyberg

Reputation: 187

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

Upvotes: 0

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20399

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>

Upvotes: 4

Related Questions