html - Problems with moving element CSS -

i'd move element h1 bit down without moving whole div block.

html code here:

<div class="mainblock"></div> <div class="under"><h1>some text</h1></div> 

css rules here:

.mainblock {     margin: 40px auto 0 auto;     width: 40%;     height: 250px;     background-color: cadetblue; }  .under {     margin: 0 auto;     width: 40%;     height: 250px;     background-color: coral; } h1 {     text-align: center;     font: 40px/30px tahoma,sans-serif;      font-weight: 900;     color: azure; /*    here add margin h1   */     margin-top: 20px; } 

how can move h1 tag only? using padding not suitable because adds space , if link created clickable space don't need.

use position:relativeon h1 element move without affecting position of other elements.

h1 {     position:relative;     top:20px;     text-align: center;     font: 40px/30px tahoma,sans-serif;      font-weight: 900;     color: azure;     /*    here add margin h1   */     margin-top: 20px; }