Posicionando um cabeçalho sem mover o restante da página para baixo - html, css, posicionamento

Eu sou novo em CSS e estou tentando posicionar meu cabeçalho literalmente alguns pixels para baixo sem mover o restante da página para baixo.

eu tentei padding-bottom mas move a página para baixo, tenta a margem inferior e não faz nada. Tentei flutuar, alinhar. A altura da linha não tem efeito por algum motivo. A única coisa que tem um pequeno efeito é position: absolute; e line-height trabalhou em conjunto com isso, no entanto, mudou-se um pouco para baixo e agora eu preciso dele apenas alguns pixels mais alto. o line-height não aumentará mais do que 2px e também tentei usar um% em todas as opções acima.

Alguém tem uma solução para o problema antes de eu usar a posição: absoluto e também o problema que tenho agora com line-height restrições.

h2 {
padding-left: 45%;
position: absolute;
line-height: 2px;
}

Respostas:

Você pode encontrar essa posição: absoluto causará alguns problemas. Isso ocorre porque você o tira do fluxo regular, para que ele não fique mais no seu lugar. Se você tiver problemas, tente a posição: relativa. Isso deve mantê-lo no fluxo e combinado com top: 2px deve mudar um pouco para baixo.

Algumas outras opções que você também pode tentar incluemmargin-top: 2px ou padding-top: 2px (ao usar a posição: relativa). O motivo pelo qual a parte inferior do preenchimento não funcionou foi porque você estava adicionando espaço / preenchimento extra abaixo e não acima.

Isso faz sentido? Por favor, faça qualquer pergunta.

Quando você usa position: absolute adicionar margem não afetará a posição.

Tente usar top: 2px ele posicionará o elemento 2 pixels abaixo da parte superior. Além disso line-height: 2px parece bastante hacky, a menos que o tamanho da fonte seja 1px, eu não o usaria.

h2 {
padding-left: 45%;
position: absolute;
top: 2px;
}

Mais sobre a propriedade position: http://www.w3schools.com/cssref/pr_class_position.asp