CSS CSS Layout Basics CSS Layout Project Introducing the Project

Aaron Selonke
Aaron Selonke
10,323 Points

Phantom White space

Check out the screenshot http://uploadpie.com/EKA3i

I'm working on adjusting the NAV bar, everything is working except I noticed that the .name element "Best City Guides" is slightly out of alignment. Its do to the white space indicated in the screenshot.

What is causing the 'phantom white-space' there and how do you Identify which element is causing it. I know that you need to use the DEV tools, which I do - but even so it is not at all obvious what is causing the gap.

Here is the project workspace https://w.trhou.se/4t5t4ysfgb

Thanks

Christopher Denny
Christopher Denny
10,460 Points

Hey Aaron!

Anchor <a> tags naturally generate 5px of margin. Try resetting its margin to 0. If this doesn't resolve it, give it a value of -5px.

Just one of those quirks...

Keep on coding! =)

  • Christopher Denny
Aaron Selonke
Aaron Selonke
10,323 Points

Thanks, but that was not the problem

Thanks for including your workspace & the screenshot. I think the whitespace problem may have to do with the different vertical heights of the <ul> and <h1> elements within your <header> element.

The content in h1.name has a vertical height of 58.8px (13.4 top margin, 32 in "content", and 13.4 bottom margin) while the ul.main-nav has 66.878px (10.720 top margin, 46.438 in "content", and 10.720 bottom margin). I was messing around with the h1's margin & when I increased it I seemed to be able to get rid of most (but not quite all) of the white space.

I'll admit I'm not that experienced with CSS, so maybe someone else has another suggestion or can improve on mine...

3 Answers

Rob R
Rob R
14,637 Points

Hello Aaron,

So I think what you are describing is the .name element not being vertically centered with the nav element. To fix this, you can either change the margin-top of .name to margin-top: .85em; OR change .main-nav to margin: 0.5em 0; which would change both the top and bottom margin of the nav.

To explain further:

It is correct to use the Dev tools to explore this. I personally find it easier to look at the inspector horizontally, so if you can open it that way it may be easier. The elements would then be on the left, and the styles would be on the right. There should be three dots that go vertically that you can click on in the right corner to change how the dock is positioned. You don't have to do this if you like it vertically, though!

Anyway… to play around with your code when the inspector was open I clicked on the h1 element on the left and then on the right scrolled down to that box with the colors to look at how much padding and margin the element had. You can then edit the element's margin or padding by scrolling back up. You can either type in a new style in the area that says element.style {

} or you can edit a style that's already there if you like. These changes are not permanent, so feel free to play around. You can always refresh the page if you make a big mistake, just remember what code you entered so you can change it in your code editor if it's what you want.

In the inspector, by setting margin and padding to 0 on .name, I was able to more clearly see how much space the element actually takes up. I could then play around with the margin to see what looked best. To keep searching for the problem though I left margin and padding at 0. I then hid the main-nav with display: none to see if it's playing a part in the unnecessary space. When it disappeared, it was clear to me it was playing a role in the space problem, so I refreshed the page and went into the styles for that element and adjusted the margin until it looked more aligned to me. Basically what I do is play around with the element or multiple elements that are close to the element to see what might be the problem, and then examine styles and edit/play around with the styles as needed.

Hope that helps!

Ana Enríquez
Ana Enríquez
8,977 Points

Hello again Aaron!

I have been testing your workspace and I see your problem:

http://uploadpie.com/sOlTO

Is true that the logo-name does not fill all the space, but your ul class does! this is because your ul has 47px height and, inside, the li elements have 25px height and 10px of padding on top and bottom.

If you want them to be aligned vertically you have to change the float to none and the display to inline or inline block. Those are the properties that would let you use vertical-align property.

Also, this is not a good practice but you could adjust by "hand", the font-size of the menu to be the same as the nav, so they have the same height in the <a> and you could erase the paddings of the li elements, or you could reduce the paddings until they are at the same height.

Hope this helps! if you need more help or if you have any question please let me know!

Emily Carey
Emily Carey
7,954 Points

Bit late to the game now, but I would have investigated the container for your li's first - and this looks to have been your problem :) looking at comments above.

Having a static measurement for both your container and item (that you're not making sure fit as you want) will cause this from time to time, so keep a watch out.

evan rost
PRO
evan rost
Pro Student 13,971 Points

HI aaron. thanks for posting your question. Where in the nav bar are you trying to align the h1.name element?

and as far as the white space goes.

to remove all white space from the h1.name element, simply delete the padding left: 2em; rule on line 91 of your style.css page and replace it with a margin: 0px; rule.

the "phantom" white space is coming from the user agent style sheet.

here is a video that might be helpfull.

https://teamtreehouse.com/library/css-foundations/getting-started-with-css/fundamental-concepts-2

cheers!