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 Bartlomiej Zabielski
Bartlomiej Zabielski
Courses Plus Student 10,363 Points

How to step element from moving when adding border

Hello all,

I keep running into this problem and cant solve it. When i add borders using :hover the content keeps moving. I have tried clicking soo many buttons but nothing seems to get it to stop moving. For instance, I have tried adding padding, margin changing to inline S: I am confused.

I created a codepen you can see what I mean when you hover over the h1 text.

https://codepen.io/digitalrambo/pen/JNQWjQ

would appreciate help on this one. Happens to me on every project.

Bartlomiej Zabielski
Bartlomiej Zabielski
Courses Plus Student 10,363 Points

googled it.

You need to make a transparent border for the non hover state. fixed, looks so much better without it jumping around.

2 Answers

Marco Fregoso
Marco Fregoso
576 Points

You're adding a border on top so I think the content will always move, you could add a transparent border and then change it when it is hovered over, there's nothing else I can come up with

Bartlomiej Zabielski
PLUS
Bartlomiej Zabielski
Courses Plus Student 10,363 Points
Bartlomiej Zabielski
Bartlomiej Zabielski
Courses Plus Student 10,363 Points

yeah that works (: It looks so much better when its static like that.