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; }