Space In Css Div Won't Go Away

I'm trying to get rid of some space that keeps getting appended to the front of my main text div... i'm guessing I have a missing property in my css... Wondering how to fix it...i

Solution 1:

Remove <pre></pre> wrapper and comment

Solution 2:

Simple answer is a misplaced <pre> tag. The <pre> tag in <div id="main"><pre> has a comment inside along with an extra newline. That shows up in the HTML file and causes an extra space. Move it below the comment and everything works out fine.

Solution 3:

The comment in the preformatted text (<pre> element) is taking up space. Move or remove it. Additionally the h1 has a margin-top by default. Remove it. Furthermore, remove the top padding in #main:

#docmap {
  background-color: #f0f0f0;
  height: 100%;
  width: 200px;
  position: fixed; 
}
#main {
  margin-left: 200px;
  padding: 020px; <-- removed top and bottompadding, kept 20pxleft and right -->
}
#mainh1 {
  margin-top:0; <-- overwrote the default topmargin -->
}

<divid="docmap"></div><divid="main"><pre><h1>Jabberwocky 1</h1>
'Twas brillig, and the slithy toves
Did gyre and gimble in the wabe:
All mimsy were the borogoves,
And the mome raths outgrabe.

$$\delta(n) = \begin{cases}
1 & n = 0 \\
0 & otherwise 
\end{cases}
$$

<h2>Jabberwocky 1</h2></pre></div>

Solution 4:

It's the content within the <pre> tag.

Remove the comments and spacing between the <pre> and <h1>. Then you'll just have to contend with the default top and bottom margin on the <pre>.

If you are unable to do that for whatever reason, simply use CSS with white-space: normal; on the <pre>. e.g pre { white-space: normal; }

Solution 5:

You can reset the default margin of the H1 header:

h1 { margin-top: 0; }