H1 horizontal spacing issue

HTML & CSS
1

Hey guys

I’m trying to put a border around my <h1> text but the native spacing for the element extends it to the far right of the page. I’m hoping I can remove that spacing to make the border tight to the text.

I’ve attached screenshots, but I’ve been told before you can’t see them… Sorry.

Another thing I’m trying to do is add borders around the text in my navigation list, but I want the spacing right side of each border to be even. I could use keyboard spaces to do this, but that would be a bad practice I think. Can someone offer a better suggestion?

Thanks in advance!

2

Well you could wrap a <span> inside of the <h1> text and that will auto fit only the text, and then place the border on there :).

I can’t visualize the 2nd request, so I’ll wait for the screenshots to be approved (then we can see them and see what you’re talking about :))

3

Try this:



<h1 style='background-color:#cfc; border:dotted 5px #f00'>
	My default
</h1>
<br />

<h1 style='background-color:#cfc; display:inline; text-align:center; border:dotted 5px #f00'>
	style over-rides default settings
</h1>
<br />

<h1 style='background-color:#cfc; display:inline-block; width:22em; text-align:center; border:dotted 5px #f00'>
	style over-rides default settings
</h1>
4

Perfect. I’m amazed at how much I forget about using <span>s

Thanks!

5

You’re welcome murl3y :). Glad i could help.

6

I took your <span> idea and ran with it… made it easier to line everything else up (when my screenshots get approved)