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

General Discussion

Posted by Maria Cuan
Maria Cuan
4,500 Points

Links underline padding

Hello tree house !
I need some help on styling links. I have the problem that my links are not working as they should. This is how the link should look like and act: http://codepen.io/anon/pen/fAoxu

this is what it's actually doing: (please scroll down) http://esthercuan.com/work

as you can see, unless it's inside an ul it will add the bottom border with "padding" and the hover wont work. This only happens in this page. Any ideas? :(

thank you so much

1 Answer

Kennard McGill
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Kennard McGill
Full Stack JavaScript Techdegree Graduate 45,774 Points
Kennard McGill
.a{fill-rule:evenodd;}techdegree seal-36
Kennard McGill
Full Stack JavaScript Techdegree Graduate 45,774 Points 
p a {
margin: -.5em; /* remove */  
padding: .5em .5em 0 0;  /*  remove */
position: relative;
}


a {
font-style: italic;
color: #616161;
border-bottom: 1px dotted #a7a7a7; /* remove optional*/
padding: 0 
}

Having the bold link will move the text forward no matter what, unless you add some padding-right on the <a> tags.

Hope that helps or give you a starting point. Just remove the lines marked above or comment them out.

Best!