How to enclose a word inside a box?

HTML & CSS
1

This is very basic.

Let say I want to put “Apple” inside a box.
How to do this the proper way in css?

2

The box itself is HTML: you will have to wrap an element of some kind around the word to be able to isolate it and style it. We need some more info about what you want to do.

3

that really depends on a LOT of things. So let’s rephrase the question. How do I draw a box around an element.

Now we have 3 ways:

  1. border: 1px solid #000; /** width style color … order is irrelevant … affects box model
  2. outline: 1px solid #000; /** width style color … order is irrelevant … does not affect box model
  3. box-shadow: 0 0 0 1px #000; /** 0 0 0 width color … CSS3 ONLY, may need vendor prefix … does not affect box model ;

for the sake of this example, I am choosing method 2.

.boxed { outline: 1px solid #000; }

so now if you had the word in an lemenet ( say, a SPAN) you can apply that style to the element. <span class=“boxed”>Apple</span>

hope that helps

4

Actually I just want to make my pagination numbers ( |< previous 1 2 3 4 5 next >| ) inside a box.
Just like the pagination here in sitepoint forum the number one is inside the box an so on…
I know I did this before. But I forgot to do this.
For my pagination I would like the last, previous, numbers, next, and last to be inside in each boxes.

5

In this forum, each number is wrapped in a san, and a class on a span is used to style it specially. Can you post here the HTML output of your pagination numbers?

6

Here is what i"m trying to do.

By the way it is under bootstrap.

Can you guys show me sample using css please.

7

Looks like you’ll need to go into the backend that is creating those pagination links and add some hooks, like a class on the current page item.

8

Yeah the answer is just <span> I created that using CodeIgniter.
I’ll try to experiment.

9

Cool I managed to put it inside the box. lol

10

Cool. :slight_smile: Be aware, though, that you should only use an ID once per page, so it would be better to turn that into a class. E.g.

<span [COLOR="#FF0000"]class[/COLOR]="paginate_numbers_tag"><b>1</b></span>

Then you can target the <b> and <a>s and style them any way you like, by putting a box around them etc. as described above.

11

@ralph

Thanks for the reminder.

12

Can you guys show me sample using css please.

.boxed { outline: 1px solid #000; } is CSS

But I see what you wanted was a solid box, in which case:

background: cyan;

is the CSS property you’d be looking for.

Anyway, I just thought would point out that you dont need the SPAN in this situation. you should be able to apply the style to each anchor tag.
OR BETTER YET create a proper navigation list , apply the style via the UL

.paginate_numbers_tag {
padding:0;
margin:0;
list-style:none;
font-family: sans-serif;

}
.paginate_numbers_tag li {
	display:inline-block;
	
	}
.paginate_numbers_tag a, .paginate_numbers_tag li>span {background:  cyan; text-decoration: none; padding:.25em}
.paginate_numbers_tag li>span { font-weight:  bold;}

<ul class="paginate_numbers_tag">
	<li><span>1</span></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">></a></li>
	<li><a href="#">Last</a></li>
</ul>