пробел в css div не будет go прочь - PullRequest
Новая
       0

пробел в css div не будет go прочь

0 голосов
/ 04 февраля 2020

Я пытаюсь избавиться от некоторого пространства, которое продолжает добавляться в начало моего основного текстового div ... я предполагаю, что в моем css есть отсутствующее свойство, задаюсь вопросом, как это исправить ... это выглядит как установка верхней части "основного" элемента div в конец элемента "docmap".

enter image description here

здесь css: 

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

здесь html: 

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

Ответы [ 6 ]

1 голос
/ 04 февраля 2020

Комментарий в предварительно отформатированном тексте (элемент <pre>) занимает место. Переместите или удалите это. Кроме того, h1 по умолчанию имеет маржинальную вершину. Убери это. Кроме того, удалите верхний отступ в #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 -->
}


Jabberwocky 1
'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}
$$

Jabberwocky 1
1 голос
/ 04 февраля 2020

Это содержимое внутри тега <pre>.

Удалите комментарии и интервал между <pre> и <h1>. Тогда вам просто придется бороться с верхним и нижним полями по умолчанию на <pre>.

Если вы не можете сделать это по какой-либо причине, просто используйте CSS с white-space: normal; на <pre>. например, pre { white-space: normal; }

1 голос
/ 04 февраля 2020

Простой ответ - неуместный тег <pre>. Тег <pre> в <div id="main"><pre> содержит комментарий внутри и дополнительную новую строку. Это отображается в файле HTML и вызывает дополнительный пробел. Переместите его ниже комментария, и все работает нормально.

1 голос
/ 04 февраля 2020

Удалить Оболочка и комментарий

0 голосов
/ 04 февраля 2020 

#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;
}


<!----------------------------------------------->
<!-- do not edit above
<!----------------------------------------------->

Jabberwocky 1
'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}
$$

Jabberwocky 1

Сохраняя существующий HTML, вы можете установить white-space: normal на элементе pre, чтобы удалить его внутренний интервал.

(я также удалил дополнительные поля и отступы)

0 голосов
/ 04 февраля 2020

Вы можете сбросить поле по умолчанию для заголовка H1: 

h1 { margin-top: 0; }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...