Mysterious Vertical Gap Between Divs

Question

There is a mysterious gap appearing between my header and footer. I took out the main content divs while investigating so I know it is not those to blame. Here is my website: http://classweb2.mccombs.utexas.edu/mis333k/msbcf555/TestSite/Default.aspx

I will share the stylesheet if requested, but it is long and I feel like the solution is something obvious that I have not thought of.

What I have tried:

• Resetting the margins and padding
• Making sure no line breaks or other divs are hiding between the real divs

Answer 1

Your #header element has display:inline-block applied to it. Inline-block adds visible space between elements if there is any whitespace at all - even a single space character. I'm not why you've made it an inline-block, as it seems like a standard block level element. Remove that and the space should disappear.

There are other options as well, though I think this is the simplest. For more information on the "mysterious" spaces that inline-blocks creates, see here: http://css-tricks.com/fighting-the-space-between-inline-block-elements/