Removing top padding from table cell div - html

Question

I have the same issue.
.mainDiv {
border-spacing: 15px;
}
.formDiv {
width: 300px;
background-color: #F5F6CE;
padding: 10px;
margin-left: 20px;
display: table-cell;
vertical-align: top;
}
.resultDiv {
background-color: #F5F6CE;
padding: 20px;
box-shadow: 5px 5px 5px #888888;
margin-left: 20px;
display: table-cell;
width: 100%;
}
Now, I want to add <h1> to formDiv which results in:
I want the company registration to be aligned to top.
I found many threads giving answer:
vertical-align: top;
but it's not working for me. Please help.
HTML is:
<div class="mainDiv">
<div class="formDiv" align="center">
<h1 align="center">Company Registration</h1>
<form id="compReg" onsubmit="SaveData();return false;">
<Table align="center" cellspacing="5px">
<tr>
<td>
<Input id="txtEmail" type="email" class="text" placeholder="Contact Email" />
</td>
</tr>
<!-- other input types -->
<tr>
<td>
<Input type="submit" value="Submit" />
<Input type="reset"/>
</td>
</tr>
</table>
</form>
</div>
<div class="resultDiv" id="result">
<div align="right">
<input type="button" onclick="clearData()" value="Clear" />
<br>
<br>
</div>
<table class="dataTable" width="300">
<thead>
<th width="20px">Id</th>
<th width="250px">Email</th>
<!-- other headers -->
<th width="50px">Color</th>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
</div>
check JSFiddle I want the "problem" h1 to be aligned at top of left div.

Answer 1

h1 tag has default margin. Try to set it to 0px.
h1{
margin:0px;
}

Answer 2

Try resetting the default table padding and margin values
#yourtable {
margin: 0;
padding: 0;
}

Answer 3

As from my understanding if you are using table and trying to solve table cell spacing issue. try to make zero cell-spacing and cell-padding.
<table cellpadding="0" cellspacing="0">
CSS to H1 spacing
table h1{ margin:0; padding:0; }
JSFIDDLE DEMO

Answer 4

You mean this? Please post your HTML-Markup next time!
h1 { margin:0; background: blue; }
.formDiv {
width: 300px;
background-color: #F5F6CE;
margin-left: 20px;
padding: 0 10px 10px 10px;
display: table-cell;
}
<div class="wrapper">
<div class="formDiv">
<h1>Lorem</h1>
<p>ipsum dolor</p>
<input name="test" type="text">
</div>
</div>
Look at your fiddle: http://jsfiddle.net/xsmzLb3g/2/
You have to change the margin/padding of the h1 and div.