Header Borders

[Guest milspecfilm]

What is the best way to simply wrap a border around a selection of text, whether it be header, paragraph, or anything else.

 

When I say wrap I mean where the border is hugging all sides of the text, not extending through the page to identify the margins.

 

Can anyone clarify?

 

-Neal

[JBall]

this might help...

[Susie]

That's a useful link. And just to add to that, you would only need to declare a width (and maybe a height?) in the CSS.

[Wickham]

If you want to put a border around the whole h tag or p tag, then you need to add a width as Susie said.

 

When you said a selection of text, I thought you meant just part of the text in a heading, and so I did a test with a span tag:-

CSS:-

.border { border: 2px solid red; line-height: 1.4; }

.border2 { border: 2px solid red; width: 400px; text-align: center; }

 

Markup:-

 

The text inside the span tags has a border.

The text has a border around all of it.

The text inside the span tags has a border.

 

What I found was that the first and last examples with the span tag only produced side borders, not top or bottom borders, until I added line-height to the style, which varied according to the text size, (unless your style for the whole page in the body style already includes a suitable line-height). The border needs a bit extra line-height in some circumstances. It does not need a width as it just flows inside the p or h tag.

 

The second example applying the border class to the whole h tag (or p tag) does not need a line-height adjustment but does need a width. You need to allow enough width in case someone increases text size and the text expands beyond the border, so centering the text is advisable.

Edited January 24, 2009 by Wickham