CSS Como da um `margin-down` ?

[Semnet]

Eu tenho um titulo <h1> que esta colado no topo, e eu queria dar um espaço de cima para baixo, eu estou usando margin-left/right para mover pros lados o <h1>, mas tentei  usar um margin-top -40 para o titulo descer mas também nao vai

[Leonardo0308]

Boa tarde @Semnet

 

Se você quer que o titulo desça, o certo seria fazer margin-top: 40px e não -40. Pois assim você aumentará a margem entre o elemento H1 e o elemento que está acima dele e por consequência o titulo irá descer.

[DiF]

@Semnet Complementando a resposta do colega,  imagine o plano cartesiano e o elemento que você quer no eixo zero, zero.

 

Com isso, se o atributo for "margin-top", todo valor negativo, fará subir e positivo fará descer.

Logo: 

 

/*fica colado no top do site*/
h1{
  margin-top: 0;
}

/*fica acima do topo ou seja, some da tela*/
h1{
  margin-top: -40px;
}


/*abaixa 40px do topo*/
h1{
  margin-top: 40px;
}

Só evite de usar margin para posicionamento quando o elemento for filho de outro.  Pois o valor do atributo vai ser herdado.. consequentemente moverá o resto junto.

[Semnet]

Desculpe a demora para responder , mas quando eu uso isso a div que desce ao invés do h1 ,ficando um espaço em branco

 

COD HTML

<div class="pink"> <!-- Part Pink-->
            <h1>Try Premium free <br>
            for 3 mouths </h1>
            <p>Play millions of songs ad-free, on-demand, and <br>
            offline.</p>
            <a href="" class="button1">VIEW PLANS</a>
            <div class="img1"></div> 
        </div><!-- End Part Pink -->

CSS 

.pink h1 {
    font-family: 'Alatsi', sans-serif;
    font-size: 55px;
    margin-left: 100px;
    margin-bottom: 20px;
    margin-top: 60px;
}

 

Olhe a imagem e veja como fica , essa parte branca e quando eu dou o margin top

[DiF]

@Semnet Como mencionei anteriormente. O elemento filho vai puxar todo o contêiner junto.

O margin não vai funcionar nesse caso.

 

Existem N maneiras de contornar isso.

 

Por exemplo, definir uma posição para o elemento em questão usando o position relative ou absolute em conjunto com o  atributo "top".

 

Se for usar o absoluto no h1, lembre de definir o contêiner como relativo.

Pontos ruins, desta forma, você será obrigado a posicionar os outros elementos também. Já que a posição absoluta move o elemento.

 

Outro jeito de resolver é a que eu acho melhor para esses casos. Criar uma estrutura usando o <div> como contêiner, <section> para um box de conteúdo e usar o <span> para dar uma "nova linha" nos elementos.

 

O que isso implica? você tem um controle melhor sobre os elementos e mais liberdade no CSS para manipular eles.

Mais precisamente, o que você quer é dar um "espaço entre o topo e o elemento H1. Você pode usar o padding no elemento section. Assim você deixa uma margem.

Repare que os box verdes, eu deixei assim só para você ver os limites de cada "section" 

Estude este código tanto a estrutura HTML quanto o CSS.  Tente depois replica-lo sem "copiar" para treinar! 

 

PS: uma coisa muito importante. Acostume-se a usar um CSS reset e coloca-lo antes do seu CSS.

 

<div class="pink">
  <section class="box">
   <header>
      <h1> Try Premium free <span class="block">for 3 mouths</span> </h1>
   </header> 

    <p><span class="block">Play millions of songs ad-free,</span> on-demand, 
       <span class="block">and offline.</span></p>
   <a href="#" class="btn">VIEW PLANS</a>
</section>

CSS:

.top{
  width: 100%;
  height: 100px;
  background: yellowgreen;
}

.pink{
  width: 100%;
  background: #cf88cf;
}
.pink h1{
  font-size: 20pt;
  
}

.pink .box h1 span{
  text-align: center;
}

.pink section.box{
  padding: 10px;
  width: 200px;
  background: green;
}

.box{
  display: inline-block;
}

.box p{
  text-align: center;
}


span.block{
  display: block;
}

.box .btn{
  margin-left: 30px;
}

.btn {
	box-shadow:inset 0px 1px 0px 0px #f5978e;
	background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
	background-color:#f24537;
	border-radius:6px;
	border:1px solid #d02718;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:10px 20px;
	text-decoration:none;
	text-shadow:0px 1px 0px #810e05;
}
.btn:hover {
	background:linear-gradient(to bottom, #c62d1f 5%, #f24537 100%);
	background-color:#c62d1f;
}
.btn:active {
	position:relative;
	top:1px;
}

Veja o código acima funcionando: https://jsfiddle.net/dife/o90gwa61/33/

[Semnet]

Obrigado pela ajuda, consegui colocar isso em meu codigo , mas voce sabe um video no yt onde fale sobre isso porque eu nao compreendi muito bem a logica

(OBS se nao tiver um link de um video , nao precisa me explicar)