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

Peter Jonsson
Peter Jonsson
1,857 Points
Posted by Peter Jonsson
Peter Jonsson
1,857 Points

how to get space under the line

If i make a line under the link with class= "gateway" with the following css. How do i make some space between the line and the link?

.gateway { border-bottom: 1px solid #ffa949; }

Fran ADP
Fran ADP
6,304 Points
Fran ADP
Fran ADP
6,304 Points

Hi Peter, can you provide us with images?

5 Answers

Phil Livermore
Phil Livermore
11,018 Points
Phil Livermore
Phil Livermore
11,018 Points

That looks ok to me. The reason the inline-block changes things is, as standard links are display: inline which ignores margins on that element. Changing to inline-block means that margins are taken into account so there is additional space under the link (outside of the border).

Phil Livermore
Phil Livermore
11,018 Points
Phil Livermore
Phil Livermore
11,018 Points

Try adding some bottom padding.

Peter Jonsson
Peter Jonsson
1,857 Points
Peter Jonsson
Peter Jonsson
1,857 Points

Thanks !

I ended up with the following css code which did the job: .

.gateway { display: inline-block; padding:5px; margin-bottom: 10px; border-bottom: 2px solid #ffa949; }

seems like display: inline-block was instrumental in making the space.

I think the margin bottom was needed because of the following part of the page had the following class:

.t-border { border-top: 2px solid lightgrey;

Maybe there is a better way?

Phil Livermore
Phil Livermore
11,018 Points
Phil Livermore
Phil Livermore
11,018 Points

Without seeing the rest of the code it is difficult to say what is the best way, plus there are sometimes multiple ways to get the same result. With regards to spacing, the padding will add space between any text and the border. The margin will add space outside of the border between the edge of the border and other elements.