posição: relativo deixa um espaço vazio

O código está aqui: http://lasers.org.ru/vs/example.html

Como remover um espaço vazio sob o bloco principal (#page)?

Bem, não use posicionamento relativo então. O elemento ainda ocupa espaço onde estava originalmente ao usar o posicionamento relativo, e você não pode se livrar disso. Você pode, por exemplo, usar o posicionamento absoluto, ou fazer os elementos flutuarem lado a lado.

Brinquei com o layout um pouco e sugiro que você altere essas três regras para:

#layout { width: 636px; margin: 0 auto; }
#menu { position: absolute; width: 160px; margin-left: 160px; }
#page { width: 600px; padding: 8px 16px; border: 2px solid #404241; }

Outro truque que funcionou bem para mim é usar uma margem inferior negativa no elemento relativo que você moveu. Não há necessidade de ir com posicionamento absoluto.

Algo como:

position: relative;
left: 100px
top: -200px;
margin-bottom: -200px;

Semelhante (se não idêntica) à solução que vejo agora, de verde.

#page {
  padding-bottom: 0;
}

Experimente esta regra:

#page {
  border: 2px solid #404241;
  bottom: 0;
  padding: 8px 16px;
  position: absolute;
  top: 70px;
  width: 600px;
}

Mudei a posição para absoluta, isso permite que você use a bottom: 0propriedade.

Eu tive um problema parecido. A maneira mais fácil é substituir a parte superior margin-toppor #page.

Eu tive o mesmo problema. A margem negativa não funcionou para mim, pois deixou uma enorme área branca onde costumava estar. Resolvi esse problema no meu caso inserindo manualmente a altura.

.maincontent {
    height: 675px;
}

Minha resposta está atrasada, mas pode ajudar outras pessoas com um problema semelhante que eu tive.

Tive um <div>com position: relative;onde todos os elementos filhos têm o position: absolute;estilo. Isso fez com que cerca de 20px de espaço em branco aparecesse na minha página.

Para contornar isso, adicionei margin-top: -20px;ao próximo elemento irmão após <div>com position: relative;.

Se você tiver um elemento irmão antes, você pode usar margin-bottom: -20px;

section {
  height: 200px;
}

<h2>Extra Whitespace</h2>
<section>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div style="position:relative;">
    <div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
  </div>
  <div>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</section>


<h2>No Whitespace margin-top</h2>
<section>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div style="position:relative;">
    <div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
  </div>
  <div style="margin-top:-20px;">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</section>


<h2>No Whitespace margin-bottom</h2>
<section>
  <div style="margin-bottom:-20px;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div style="position:relative;">
    <div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
  </div>
  <div>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</section>

Consegui me livrar dos espaços em branco usando a seguinte estrutura:

E aqui está a marcação

<div id="the-force-moved-element>I've been moved</div>
<div id="the-hack-part-1">
    <div id="the-hack-part-2>The quick brown fox jumps over the lazy dog</div>
</div>
<p>Lorem ipsum dolor sit amet...</p>

Esta pergunta parece ter sido bem respondida - no entanto, todas as respostas acima tiveram efeitos colaterais negativos no meu layout. Isso é o que realmente funcionou para mim:

.moveUp {
    position: relative;
}
.moveUp > * {
    position: absolute;
    width: 100%;
    top: -75px;
}

/** This part is just design - ignore it ... ****/
.box1, .box2, .box3 {
    height: 100px;
    color: white;
}
.box1 {
    background: red;
}
.box2 {
    background: blue;
    height: 50px;
}
.box3 {
    background: green;
}

<div class="box1">Box 1</div>
<div class="moveUp"><div class="box2">Box 2 - 75px up</div></div>
<div class="box3">Box 3</div>

A melhor solução se você não quiser deixar espaços abaixo (relativo)

É usar margin-top e posicionar: pegajoso

#page {
     margin-top: -280px;
     position: sticky;
}