CSS CSS Layout Basics Controlling Layout with CSS Display Modes Positioning Elements Side-By-Side with Inline Display

Dimitris Karatsoulas
Dimitris Karatsoulas
5,787 Points
Posted by Dimitris Karatsoulas
Dimitris Karatsoulas
5,787 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,451 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,451 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,787 Points
Dimitris Karatsoulas
Dimitris Karatsoulas
5,787 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.