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...it kind of looks like its setting the top of the "main" div to the bottom of the "docmap" div.

here's by css:

#docmap {
  background-color: #f0f0f0;
  height: 100%;
  width: 200px;
  position: fixed; 
}
#main {
  margin-left: 200px;
  position: 200px; 
  padding: 20px;
}

here's by html:

<html>
<head>
    <script src="../js/load.js"></script>
</head>
<body>
<div id="docmap"></div>
<div id="main"><pre>
<!----------------------------------------------->
<!-- do not edit above
<!----------------------------------------------->

<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>
</body>
</html>

回答1:

Remove <pre></pre> wrapper and comment

回答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.

回答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: 0 20px; <-- removed top and bottom padding, kept 20px left and right -->
}
#main h1 {
  margin-top:0; <-- overwrote the default top margin -->
}

<div id="docmap"></div>
<div id="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>

回答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; }

回答5:

You can reset the default margin of the H1 header:

h1 { margin-top: 0; }

回答6:

#docmap {
  background-color: #f0f0f0;
  height: 100%;
  width: 200px;
  position: fixed; 
}
#main {
  margin-left: 200px;
  padding: 20px;
	padding-top: 0;
}

pre {
	margin: 0;
white-space: normal;	  
	
}

#main h1 {
	margin-top: 0;
}

<div id="docmap"></div>
<div id="main"><pre>
<!----------------------------------------------->
<!-- do not edit above
<!----------------------------------------------->

<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>

Keeping your existing HTML, you can set white-space: normal on the pre element to remove it's internal spacing.

(I've also removed additional margins and padding)

来源：https://stackoverflow.com/questions/60062254/space-in-css-div-wont-go-away

标签

html

css