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 CSS Layout Basics Controlling Layout with CSS Display Modes Positioning Elements Side-By-Side with Inline Display

Dimitris Karatsoulas
Dimitris Karatsoulas
5,788 Points
Posted by Dimitris Karatsoulas
Dimitris Karatsoulas
5,788 Points

About the total height of .name and .main-nav elements.

Even though this question is about something that's out of the scope of this lesson I couldn't help my self not noticing the difference in the height of the .name and .main-nav elements. I mean the height of the white space they take on the page. I understand that this is due to the different font-size of each element. I've been trying to get the height of the .main-nav elements exactly the same height as the .name one with no success, mainly change the padding-top and padding-bottom of .main-nav. Any ideas of how to accomplish that? Thank you.

2 Answers

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,971 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,971 Points

Not sure if you are looking to use a calculation but I just inspected the elements and added the following:

.main-nav li {
  padding-top: 2px;
  padding-bottom: 2px;
}

and they now appear to have the same height. The same code with just main-nav has no visible effect.

Dimitris Karatsoulas
Dimitris Karatsoulas
5,788 Points
Dimitris Karatsoulas
Dimitris Karatsoulas
5,788 Points

Thank you for your response, as I told I experimented with different units and values for padding-top and padding-bottom, wasn't really with the outcome of any of those though. Was wondering if there was a more flexible way to deal with that.