CSS Margin Top not working properly on IE 8 - html

Question

I went through couple of links for this issue, but none of the fix worked for me.
I used Padding, but still getting same result.
I used position: relative, still same result and so on..
I have a CSS which looks like below:
.ItemsStyle
{
margin-top: 5px;
margin-bottom: 5px;
width: 720px;
}
and my div looks like below:
<div id="Items" class="ItemsStyle">
<!--Work Here... -->
</div>
and I have a textbox above this div which looks like:
<input id="textBoxName" type="text" style="width: 415px; font-family: Verdana"/>
Now, I want 5px margin between my textbox and my div. CSS is working perfectly fine on IE 11 and the margin is just fine.
But, when I run my application on IE 8, the margin is more, something like 30px down the textbox when I need 5px.
I have tried and tested all the methods that have been suggested in other similar posts, but I am getting same result.

Answer 1

I've tried to replicate this on a virtual machine using the following code and was unable to:
<style type="text/css">
.ItemsStyle{
margin-top: 5px;
margin-bottom: 5px;
width: 720px;
background:#f00;
height:200px;
}
</style>
<input id="textBoxName" type="text" style="width: 415px; font-family: Verdana"/>
<div id="Items" class="ItemsStyle">
<!--Work Here... -->
</div>
Nevertheless, you could just use margin-bottom on the input rather than margin-top on the div. You should get the results you're looking for:
<style type="text/css">
.ItemsStyle{
margin-bottom: 5px;
width: 720px;
}
</style>
<input id="textBoxName" type="text" style="width: 415px; font-family: Verdana; margin-bottom:5px;"/>
<div id="Items" class="ItemsStyle">
<!--Work Here... -->
</div>
As a general "flow" to a document I try to push everything down (ie margin-bottom, padding-bottom) the page rather than up (ie margin-top, padding-top)

Answer 2

Internet explorer 8 is a huge headache for any developer. Try this code:
.ItemsStyle
{
margin: 5px auto;
width: 720px;
}