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

Byron Farrell
Byron Farrell
5,700 Points
Posted by Byron Farrell
Byron Farrell
5,700 Points

Spacing in html

Hi,

I have added the google font types; Ubuntu and Baloo. When I added them to my code the text moved down a few pixels. The text in my header is centered with the bottom and top padding. Can someone shed some light as to what is causing this?

link to my code: https://w.trhou.se/doik0mllkr

Thanks for your time.

Byron Farrell
Byron Farrell
5,700 Points
Byron Farrell
Byron Farrell
5,700 Points

Sorry Stephen I deleted and created a new one. I have update the link in the forum. If you could help that would be great :)

1 Answer

Evgeniia Mas
Evgeniia Mas
4,452 Points
Evgeniia Mas
Evgeniia Mas
4,452 Points

Hello, Byron!

I think it's not a good idea to calculate paddings according to the specific font-family. What are you going to do if tomorrow you will like another font? Or may be your link to the fonts will not be available for any reasons and user will see another font uploaded by default? It will be another mess like now. There are several ways to center elements vertically so it will be calculated by browser automatically and it doesn't matter what font you have on your page. In your situation, as I see, you have a fixed height of header (50px), so, for example, you can use the most easy way to solve this problem. Take attention, it can be used ONLY if you have one line of text as now in your header! If two and more - another approaches.

1) Remove paddings from header. (padding: 17px 10px;)

2) Assign your a) header nav ul li and b) .baloo-font line-height equal to the height of your header you assigned earlier like this: 

 .baloo-font {
      line-height: 50px;
   }

Hope that helps!

Byron Farrell
Byron Farrell
5,700 Points
Byron Farrell
Byron Farrell
5,700 Points

Thanks Eveniia! It worked great. I'll keep this in mind when creating other websites.