Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Howard Chen
Howard Chen
2,999 Points

How do I get a border to only form around the words of a header, and not the space in the header surrounding the word?

I've been tinkering with adjusting margin, padding, and border properties, but I cannot seem to get a border to form only around the word/title in a header. For example:

<h1>Hello!</h1>

I want to get a border to form ONLY around "Hello!" yet when I try, I get a border that forms around the whole h1 section.

CSS example:

h1{ border:5px solid black; }

I'm getting the below:

                                                          Hello!

but I want:

                                  --------------
                                  |    Hello!    |
                                  --------------

if that makes sense.

1 Answer

Nicholas Olsen
seal-mask
.a{fill-rule:evenodd;}techdegree
Nicholas Olsen
Front End Web Development Techdegree Student 19,342 Points
Nicholas Olsen
.a{fill-rule:evenodd;}techdegree
Nicholas Olsen
Front End Web Development Techdegree Student 19,342 Points

You could make your h1 display as inline-block. I made a codepen to show you.

I don't know what your exact use-case is but this will almost certainly affect your layout in some way. I created an 'outer' div to show how you might position it.

Howard Chen
Howard Chen
2,999 Points

Hi Nicholas,

Thank you for your help that's exactly what I was looking for. There's no real purpose - I'm new to HTML/CSS coding and just playing around with styling/formatting.

Would you mind explaining in-depth how changing h1 to inline-block specifically fixes the problem? I know the definition of the value but I'm still not sure how it applies here specifically.

Regards, Howard