Problems with moving element CSS - html

Question

I'd like to move element h1 a bit down but without moving the whole div block.
HTML code is here:
<div class="mainblock"></div>
<div class="under"><h1>Some text</h1></div>
CSS rules is 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 I add some margin for H1 */
margin-top: 20px;
}
How can I move h1 tag only?
Using padding is not suitable because it adds some space and if it were a link it created some clickable space which I don't need.

Answer 1

Use position:relativeon the h1 element to move it without it affecting the position of any other elements.
h1 {
position:relative;
top:20px;
text-align: center;
font: 40px/30px Tahoma,sans-serif;
font-weight: 900;
color: azure;
/* Here I add some margin for H1 */
margin-top: 20px;
}

Answer 2

You can move it by adding line-height

Answer 3

Another possibility to achieve what you want is using positioning like so:
.under {
margin: 0 auto;
width: 40%;
height: 250px;
background-color: coral;
position:relative;
}
h1 {
text-align: center;
font: 40px/30px Tahoma,sans-serif;
font-weight: 900;
color: azure;
position:absolute;
top: 20px;
}

Answer 4

It looks like padding-top does what you want if the link is inside the h1 tag.
HTML
<div class="mainblock"></div>
<div class="under"><h1>Some text</h1></div>
CSS
.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;
/* replace margin-top with padding-top */
padding-top: 20px;
}
Here's a fiddle...I changed the padding from 20px to 60px to make it easier to see that there's no clickable space above the text.
http://jsfiddle.net/htpb9bdk/

Answer 5

Provide the position:absolute to parent and child element
try this : http://jsfiddle.net/heuek2za/
.mainblock {
margin: 40px auto 0 auto;
width: 40%;
height: 250px;
background-color: cadetblue;
margin-left:28%;
}
.under {
margin: 0 auto;
position:absolute;
width: 40%;
height: 250px;
background-color: coral;
margin-left:27%;
margin-top:4%;
}
h1 {
text-align: center;
position:absolute;
font: 40px/30px Tahoma,sans-serif;
font-weight: 900;
color: azure;
/* Here I add some margin for H1 */
margin-top: 50%;
}

Answer 6

You can also apply float:left;width 100% to H1 which makes your margin to work.
The new CSS for h1 becomes:
h1 {
color: azure;
float: left;
font: 900 40px/30px Tahoma,sans-serif;
margin-top: 20px;
position: relative;
text-align: center;
width: 100%;
}